打包的目的
達到生產環境（功能要完整，沒有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")
