## 文件压缩
`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`文件了。
