假设我们现在有一个没有安装依赖的名为demo的vue项目
1、首先执行指令vue init webpack demo下载官方模板，之后会生成一个空白项目并且自动安装了依赖
2、接着把两个文件的package.json合起来，也就是在原先的基础上加上webpack需要的依赖
3、完成合并之后，再在demo项目中npm install安装依赖
4、删除新建的webpack项目中的src文件夹
5、把demo项目里剩下其他内容（除了yarn.lock）都复制到新建的webpack项目文件夹下
6、这里有一个注意点：package.json下面的brosweslist和demo目录下的.broserlistrc文件只能留一个，否则会报错
7、然后把public/index.html提出来放到根目录下，因为build/webpack.prod.conf.js:65 这里配置了要注入的html在根目录下
8、config/prod.env.js这里要加上BASE_URL的定义，index.html里也要进行修改
9、可以改一下build/webpack.prod.conf.js 里CopyWebpackPlugind的内容。它现在的配置是把根目录下static文件夹的内容打包时全部拷贝到dist/static下，因为现在这个文件夹没用所以就直接改了。
这样就是把public文件夹下的内容拷贝到dist下了。现在build就没问题了。
10、现在npm run build就可以打包项目到dist文件夹下了，完成打包。
下面再补充一些常用的配置
1.webpack.dev.conf.js和webpack.prod.conf.js分别是yarn run dev和yarn run build时会用到的配置文件，它们都import并merge了webpack.base.conf.js里的公共配置。
2.所有项目文件打包的时候会根据其对应的loader来进行。这里根据不同的文件后缀选择不同的loader，对于图片、视频、音频、字体之类的文件有一个limit选项，如果文件大小小于阈值的话就会把文件用base64编码，不再单独需要一个http报文进行请求。
3.resolve里可以定义别名，比如@默认被定义为src目录。这样在js,vue这些后缀的文件里import时，路径里可以用@来代替src目录，比如 import ‘@/assets/css/base.css’
4.在webpack.prod.conf.js里有很多plugin，UglifyJsPlugin做js混淆，ExtractTextPlugin和OptimizeCSSPlugin在这里处理css，全部提取到一个文件里然后压缩，HtmlWebpackPlugin用于生成dist/index.html，以及CopyWebpackPlugin。
5.在webpack.dev.conf.js里HotModuleReplacementPlugin可以在修改代码后不用重新运行dev server，只修改内存中的内容，进行热重载
