## 文件壓縮
`webpack`使用`UglifyJSPlugin`來壓縮生成的文件。
`npm i --save-dev uglifyjs-webpack-plugin`
修改`webpack.config.js`
~~~
// ...省略前面引入的模塊
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
// ...省略一些配置
plugin: [
new UglifyJSPlugin()
]
}
~~~
`npm run build`發現打包文件的體積小了好多。
## 指定環境
> 許多 library 將通過與 process.env.NODE_ENV 環境變量關聯，以決定 library 中應該引用哪些內容。例如，當不處于生產環境中時，某些 library 為了使調試變得容易，可能會添加額外的日志記錄(log)和測試(test)。其實，當使用 process.env.NODE_ENV === 'production' 時，一些 library 可能針對具體用戶的環境進行代碼優化，從而刪除或添加一些重要代碼。我們可以使用 webpack 內置的 DefinePlugin 為所有的依賴定義這個變量：
>
修改正式環境配置文件`webpack.config.js`：
~~~
module.exports = {
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
]
}
~~~
重新編譯之后發現`vendor.[hash].js`又變小了。
## 優化緩存
剛才我們把`[name].[hash].js`改成了`[name].[chunkhash].js`后，這樣`app.[hash].js`和`vendor.[chunkhash].js`不一樣了。
然鵝，現在又有一個問題了，你隨便修改一處代碼，例如`Home.js`，隨便改一個字，你就會發現`home.[hash].js`hash變化的同時，`vendor.[chunkhash].js`名字也變了，這不行啊，這和原來沒拆分之前是一樣的，我們本意是`vendor.[chunkhash].js`作為內置庫的名字是不變的，一直緩存在用戶本地的。。。
針對這一情況，[官方文檔](https://doc.webpack-china.org/guides/caching)推薦了一個插件[HashedModuleIdsPlugin](https://doc.webpack-china.org/plugins/hashed-module-ids-plugin)：
~~~
module.exports = {
// 定義webpack插件
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.HashedModuleIdsPlugin()
]
}
~~~
現在你打包，修改代碼再試試，是不是名字不變啦？錯了，現在打包，我發現名字還是變了，經過比對文檔，我發現還要加一個`runtime`代碼抽取：
~~~
module.exports = {
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.HashedModuleIdsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'runtime'
})
]
}
~~~
為什么要加上這句話呢？看下[解釋](https://doc.webpack-china.org/concepts/manifest)。
**注意：引入順序在這里就很重要了，`CommonsChunkPlugin`的`vendor`實例，就必須在`runtime`實例之前被引入。**
## 公共資源路徑
想象一個場景，我們的靜態文件放在了單獨的靜態服務器上面，那我們打包的時候呢，怎么樣才能讓靜態文件的鏈接定位到靜態服務器上面呢？（就是怎樣匹配靜態資源路徑到靜態服務器路徑）。
看官方文檔[Public Path](https://doc.webpack-china.org/guides/public-path)
`webpack.config.js`里面有一個`output`的配置項，配置項里面增加一個`publicPath`，當我們用`/`，就相當于當前路徑，如果你想要改成別的目錄，也就是項目部署的地方不是服務器的根目錄，就改這里就好了。
~~~
module.exports = {
// ...省略其他配置項
output: {
publicPath: '/'
}
}
~~~
## 打包優化
一般的，我們打包上線的時候，都是直接目錄替換的，但是現在我們看看`dist`文件夾里面有好多文件，因為每次打包這些文件都沒有被清空掉，所以我們希望在我們打包項目的時候，能有一些工具幫我們清理掉舊的文件：
`npm install clean-webpack-plugin --save-dev`
安裝完之后修改一下正式環境配置文件`webpack.config.js`：
~~~
const CleanWebpackPlugin = require('clean-webpack-plugin')
// ...省略一些代碼
module.exports = {
// 定義webpack插件
plugins: [
// ...省略一些代碼
new CleanWebpackPlugin(['dist'])
]
}
~~~
現在`npm run build`試試，是不是之前的都清空了。當然我們之前的api文件夾也被清空了，不過沒關系哦~本來就是測試用的。
## 抽取css
目前我們的`css`是直接打包進`js`里面的，我們希望能單獨生成`css`文件。
我們使用[extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin)來實現：
`npm install --save-dev extract-text-webpack-plugin`
修改正式環境配置文件`webpack.config.js`：
~~~
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// ...省略一些代碼
module.exports = {
// ...省略一些代碼
module. {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
},
// 定義webpack插件
plugins: [
// ...省略一些代碼
new ExtractTextPlugin({
filename: '[name].[contenthash:5].css',
allChunks: true
})
]
}
~~~
`npm run build`之后發現已經會單獨生成`css`文件了。
