webpack4升级篇|博客系列 | 前端进阶之旅

# 一、环境及依赖库更新

由于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({})
        ]
    }
}