打包的目的
达到生产环境（功能要完整，没有Bug，代码的体积尽可能小）
步骤
1、开阶段和生产阶段各建立一个配置文件
开发阶段:webpack.config.js(webpack.develop.config.js)
生产阶段:webpack.publish.config.js
注意点:
生产阶段的webpack的配置文件其实就是在开发阶段webpack配置的基础上，多增加一些额外的配置
2、html-webpack-plugin 插件
在最后打包阶段，会根据模版文件生成index.html，并且还会导入bundle.js
webpack打包命令
方式1：直接在终端里面输入
webpack --progress --config webpack.publish.config.js
方式2：把上面的指令放在package.json的scripts标签中
现在打包存在的问题
上面的步骤打包出来的东西，bundle过大，index.html没有压缩
优化
1、index.html 压缩
参考：https://github.com/kangax/html-minifier#options-quick-reference
new HtmlWebpackPlugin({
filename: 'index.html', //以参数文件生成的最终的文件名称
template:'./template.html', //参照文件的路径
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
}
})
bundle.js过大的原因及解决方案
为什要优化:
文件太大了，网速慢，用户体验差
所以要把bundle的体积变得尽可能小
做法：
把有些东西，js，css，图片，字体文件从bundle.js中，剥离出去，形成一个一个小小的文件，index.html再去请求这些小的文件，虽然请求会增多，但是，速度去
哪些东西影响了bundle.js的大小：
1、没有把bundle.js中的代码压缩
2、图片和字体文件打包进入了bundle.js
3、项目所依赖的第三方包全局打包进了bundle.js
4、项目中的样式文件也全部打包进入了bundle.js
clean-webpack-plugin插件介绍
作用:
打包我们新的内容之前，把dist目录先删除掉，不影响我们后面生成的新的打包的内容
步骤:
1、安装
npm i clean-webpack-plugin --save-dev
2、在我们生产环境的webpack.publish.config.js中进行配置
导入
//打包之前删除某个文件夹
const CleanWebpackPlugin = require('clean-webpack-plugin')
在webpack.publish.config.js的plugins中配置
注意：最好把该插件放在plugins的最前面
new CleanWebpackPlugin("dist")
使用Webpack压缩我们bundle.js中的代码
步骤:
1、使用UglifyJs压缩js
参考:https://cn.vuejs.org/v2/guide/deployment.html
第一步之后，可能会遇到一个错误ERROR in bundle.js from UglifyJs
2、因为UglifyJs压缩的时候，必须是es5，使用babel来先将我们的es6代码转成es5【必须】
参考:
https://babeljs.io/docs/setup/#installation
2.1 安装三个包
npm install --save-dev babel-loader babel-core babel-preset-env
2.2 设置几个loader
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
```
2.3 在项目根目录下生成一个.babelrc文件，里面配置
{
"presets": ["env"]
}```
抽离图片和字体文件
/*limit：
表示的是一个阀值,如果当前我们资源中的图片大小
4kb就从bundle.js中剥离出来，如果小于4kb打包进bundle.js
name:打包出来的图片，放在那个文件夹下，用什么文件名称命名
[name]代表你原始的文件名称
[hash:5] 让浏览器支持图片的缓存
[ext] 图片本身的拓展名
*/
loader: "url-loader?limit=4000&name=images/[name]-[hash:5].[ext]"
抽离第三方包(vue，vue-router，...)
两种方式：
第一种方式:
不打包vue，vue-Router等，在index.html中引入CDN ， 在webpack.publish.config.js中设置：
externals:{
vue":"Vue",
"vue-router":"VueRouter"
}
缺点:将我们的命运掌握在别人的手里，万一CDN不可用，项目跑不起来
第二种方式:
还是会打包我们第三方包(vue，vue-router)不要打包进入bundle.js，要想图片那样把我们的第三方包从bundle.js中剥离出来
第一步配置，打包的入口文件和输出文件
entry: {
//属性名称代表你打包出来的最终的文件名称
//值，代表你要打包的是哪个第三方包(名称看node_modules中)
vue:['vue'],
vueRouter:['vue-router'],
vuex:['vuex'],
vuePreview:['vue-preview'],
vueResource:['vue-resource'],
moment:['moment'],
mintUI:['mint-ui'],
bundle:path.join(__dirname,'src/main.js') //打包自己的业务逻辑代码，别忘记了
}, //打包入口文件
output: { //输出文件
path: path.join(__dirname,"dist"),
filename: 'js/[name].js'
}
```
第二步，在我们的plugins中配置一个插件
```new webpack.optimize.CommonsChunkPlugin({name:["vue","vueRouter","vueResource","vuePreview","mintUI","moment","vuex"],minChunks: Infinity})```
### Webpack抽离css
参考:https://vue-loader.vuejs.org/zh-cn/configurations/extract-css.html
步骤:
1、安装第三方包
`npm install extract-text-webpack-plugin --save-dev`
2、在webpack.publish.config.js中导入
`var ExtractTextPlugin = require("extract-text-webpack-plugin")`
3、在loader中，配置一下
{
test: /.css$/, //凡是以.vue结尾的文件使用vue-loader去打包
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
```
4、在plugins中配置一下，设置css文件存放位置
new ExtractTextPlugin("css/style.css")
