# 一、环境及依赖库更新
由于
Webpack的更新，很多Loader也必须更新才能适应Webpack的最新版本
| 必须更新的loader | 最低要求版本 | 功能说明 |
|---|---|---|
babel-loader |
7.1.3 |
对最新的ES语法进行转换 |
eslint-loader |
2.0.0 |
代码检查 |
file-loader |
1.1.10 |
批量修改文件路径，或者指定编译后文件存储路径 |
vue-loader |
15.0.0 |
解析、编译vue单文件组件 |
vue-style-loader |
4.1.0 |
解析、编译vue单文件组件中的样式 |
# 二、Webpack 4.x 的破坏性变更
由于
Webpack 4.x的重大变更，导致其不再支持部分插件和Loader，其中最闹心的是Chunk分离及文件分离
| 失效的插件或loader | 类型 | 功能说明 |
|---|---|---|
webpack.optimize.CommonsChunkPlugin |
内置插件 | 分离Chunk。将多次出现的代码统一打包到一个文件中。Vue工程中用来打包vendor及mainfest |
webpack.optimize.UglifyJsPlugin |
内置插件 | 压缩JS |
extract-text-webpack-plugin |
Loader |
分离文件。将部分代码或文件提取到单独文件中。Vue工程里用来分离CSS到指定文件 |
# 2.1 使用config.optimization代替
在
Webpack 4.x中，新增了optimization的选项来代替之前版本中的webpack.optimize等。在optimization选项中，我们可以进行详细的设置，以达到分离CSS，分离Chunk，压缩文件等等操作
module.exports = {
//...
optimization: {}
};
@前端进阶之旅: 代码已经复制到剪贴板
# 2.2 压缩JS及CSS文件
由于
Webpack 4.x中取消了其内置插件，所以之前的方法都不管用了。这里我推荐大家使用UglifyJsPlugin及OptimizeCSSPlugin插件来代替之前的内置插件，当然如果你只是想简单的压缩，而不做任何配置的话，可以按照官方文档中给出的方法使用optimization.minimizer: true即可
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = {
//...
optimization: {
minimizer: [
// js mini
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: false // set to true if you want JS source maps
}),
// css mini
new OptimizeCSSPlugin({})
]
}
}
