webpack4配置小结

发表于 | 分类于 | 本文总阅读量 次 | 字数统计: 890 字 | 阅读时长 ≈ 3 分钟
webpack4配置小结

默认模式

webpack4 引入了零配置的概念，通过配置不同mode，来提供默认设置，我们来看看 webpack 默认帮我们做了些什么?
development 模式下，默认开启了NamedChunksPlugin 和NamedModulesPlugin方便调试，提供了更完整的错误信息，更快的重新编译的速度。

1
2
3
4
5
6
7
8
9
module.exports = {
+ mode: 'development'
- devtool: 'eval',
- plugins: [
-   new webpack.NamedModulesPlugin(),
-   new webpack.NamedChunksPlugin(),
-   new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
- ]
}

production 模式下，由于提供了splitChunks和minimize，所以基本零配置，代码就会自动分割、压缩、优化，同时 webpack 也会自动帮你 Scope hoisting 和 Tree-shaking。

1
2
3
4
5
6
7
8
9
module.exports = {
+  mode: 'production',
-  plugins: [
-    new UglifyJsPlugin(/* ... */),
-    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
-    new webpack.optimize.ModuleConcatenationPlugin(),
-    new webpack.NoEmitOnErrorsPlugin()
-  ]
}

mini-css-extract-plugin

webpack4对 css 模块支持的完善以及在处理 css 文件提取的方式上也做了些调整，之前使用的extract-text-webpack-plugin将有mini-css-extract-plugin来代替，使用方式很简单，直接看文档就可以了。

有个特别需要注意的地方是mini-css-extract-plugin的默认文档配置，将文件名生成规则设置为了hash

1
2
3
4
5
6
new MiniCssExtractPlugin({
  // Options similar to the same options in webpackOptions.output
  // both options are optional
  filename: devMode ? "[name].css" : "[name].[hash].css",
  chunkFilename: devMode ? "[id].css" : "[id].[hash].css"
});

这里是不对的，hash值每次打包都不一样，这里将设置的hash会使长效缓存失效，参考webpack中hash/chunkhash/contenthash的区别，应该将hash改为contenthash

mini-css-extract-plugin与extract-text-webpack-plugin最大的区别是：它在code spliting的时候会将原先内联写在每一个 js chunk bundle的 css，单独拆成了一个个 css 文件。

将 css 独立拆包最大的好处就是 js 和 css 的改动，不会影响对方。比如我改了 js 文件并不会导致 css 文件的缓存失效。而且现在它自动会配合optimization.splitChunks的配置，可以自定义拆分 css 文件，比如我单独配置了ant-design作为单独一个bundle,它会自动也将它的样式单独打包成一个 css 文件，不会像以前默认将第三方的 css 全部打包成一个几十甚至上百 KB 的app.xxx.css文件了。

压缩与优化

webpack4中css的压缩需要使用 optimize-css-assets-webpack-plugin 这个插件，它不仅能帮你压缩 css 还能优化你的代码。

1
2
3
4
5
6
7
8
// 配置很简单
optimization: {
    minimizer: [
        optimization: {
          minimizer: [new OptimizeCSSAssetsPlugin()];
        }
    ]
}

看资料说optimize-css-assets-webpack-plugin这个插件默认使用了 cssnano 来作 css 优化，启用css module后就一直报错，cssnano网站一直打不开，后来参考了create-react-app的配置，添加了cssProcessorOptions配置项，将parse设置为postcss-safe-parser（需要npm安装）才ok。

1
2
3
4
5
new OptimizeCSSAssetsPlugin({
    cssProcessorOptions: {
        parser: require("postcss-safe-parser"),
    }
})

UglifyJsPlugin

在mode为production的时候，默认开启了UglifyJsPlugin，但是一旦配置了optimization.minimizer，就需要手动去配置UglifyJsPlugin，如果你打包之后JavaScript没有被压缩，可以注意下这里，网上配置资料很多就不多说了。

打包速度

这里有一篇介绍打包优化速度的文章保持 webpack 快速运行的诀窍：一本提高构建性能的现场指导手册

个人看法是，如果开发环境打包速度太慢，可以将第三方库通过dllPlugin进行预打包引入，基本这样之后基本可以节省几秒到十几秒。 如果是生产环境打包的话，三五分钟都是可以接受的，只要不是太变态的十几二十分钟，优化够用就行了