第一步：创建项目文件夹
mkdir webpack-vue
第二步：使用vscode打开文件夹，经行npm初始化
npm init -y
第三步：下载项目需要资源包
生产环境 vue
npm install --save vue
开发环境 webpack
1. 他是基于nodeJs，所以要确保安装了nodeJs --save-dev工具类型加dev
2. npm install --save-dev webpack 或者 npm install --save-dev webpack@<version> （提供核心功能）
3. npm install --save-dev webpack-cli(提供命令命令行)或者npm install --save-dev webpack-command
注意4.x以上的webpack才需要安装webpack-cli
第四步：在项目文件夹（webpack-vue）里面创建一个src文件夹，用来存放源文件（source）
//在src文件里面创建一个入口js--->index.js var a=0; alert(a);
第五步：在项目根目录创建一个index.html文件，作为入口文件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <h1>我是入口文件</h1> 11 </body> 12 </html>
第六步：安装需要使用的插件
1. 找到需要使用插件并安装他 - 命令：npm install --save-dev html-webpack-plugin 2. 在webpack.config.js中引入他 - const HtmlWebpackPlugin=require('html-webpack-plugin') 3. 在plugins选项中调用他，并按照他的文档中区做配置 - //插件，将index.html文件自动打包到dist文件夹里面 plugins:[ //自动生成一个index.html文件在出口位置，并且会自动在生成的文件中引入打包的js文件 new HtmlWebpackPlugin({}); ]
第七步：在项目根目录创建一个webpack.config.js文件（这是一个webpack的配置文件）
/** 五大核心 0. 模式 指定这次打包是大的开发环境用的包（不压缩），还是生产环境的包（压缩）。4.x版本的webpack支持的 1. 入口 指定webpack需要打包的项目的入口文件 2. 出口 打包之后生成的文件需要放到哪个位置 3. 加载器 默认情况下，webpack只是简单的打包js文件，如果需要打包css，img之类的文件则需要添加相对应的加载器，去处理这种类型的文件。 4. 插件 插件是加载器干不了的事情，就可以使用插件来干. ps: 前三个，模式，入口，出口。必须配置 */ //如何配置 //1. 就是在webpack.config.js文件中，暴露一个对象，使用commonjs方式暴露
1 /** 2 * 1.模式：开发或者生产模式（4.x版本的webpack才分模式） 3 * 2.入口 4 * 3.出口 5 * 4.插件 6 * 5.加载器 7 * ps：123必须配置 8 */ 9 10 // 引入nodejs内置模块path 11 const path = require('path'); 12 // 引入webpack的插件HtmlWebpackPlugin，需要安装：npm i --save-dev html-webpack-plugin 13 const HtmlWebpackPlugin = require('html-webpack-plugin') 14 15 // 将这个文件暴露出去 16 17 module.exports = { 18 // 模式 19 mode: 'development', //production(生产模式) 20 21 // 入口(从何处开始打包) 22 23 entry: './src/index.js', //就是入口js文件路径。可以是绝对路径也可以是相对路径 24 25 // 出口（打包的文件放在哪） 26 27 output: { 28 //必须是绝对路径,打包之后会再这个路径下创建一个dist文件夹 29 path: path.resolve(__dirname, './dist'), 30 // 设置打包之后的文件名 31 filename: 'bundle.js' 32 }, 33 34 // 插件 35 36 plugins:[ 37 /** 38 * 1.因为是插件，可能由多个，所以使用数组类型 39 * 2.自动生成一个index.html文件在出口位置（dist文件夹里面），并且自动在生成的文件中引入js文件 40 * 3.详细配置可以在webpack官网的插件选择里面找到 41 * 4.https://github.com/jantimon/html-webpack-plugin#configuration 42 */ 43 44 /** 45 * HtmlWebpackPlugin插件 46 * 将index.html入口html文件自动打包到dist文件夹中 47 */ 48 new HtmlWebpackPlugin({ 49 filename:'entry.html', 50 // 让这个文件内容和根目录的html完全一致 51 template: './index.html' 52 }) 53 ] 54 }
第八步：打包
没有全局安装webpack要执行下列命令。否则直接$webpack 1. ./node_modules/.bin/webpack 2. npx webpack(npm 5.x+新增的功能) 3. 配置package.json的npm脚本
项目目录
项目的目录结构 1 dist （最终生成的文件，这个文件夹才是最终需要上传到服务器上的代码） 3 node_modules（放资源包） 4 src (源文件，需要被webpack打包的文件，都需要放在这个文件夹下面，都是一些自己写的项目模块) - index.js （这个是项目打包入口） 5 index.html （这个是我们的项目页面入口） 6 packge-lock.json(包锁文件) 7 packge.json（项目依赖的资源包与项目的描述信息的文件） 8 webpack.config.js(webpack的配置文件) 上面三个文件，这三个文件都不是真正需要上线（将项目放到服务器）的内容。于是我们需要webpack打包（抽取其中真真需要用的内容）