webpack4 踩坑记

最新推荐文章于 2024-12-18 10:18:45 发布

转载最新推荐文章于 2024-12-18 10:18:45 发布 · 92 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000014670240

文章标签：

#webpack #ViewUI

本文介绍了Webpack4的默认配置特性，包括entry入口、开发与生产模式、内置CommonsChunk配置简化等。同时，还讲解了如何使用ES6语法、WebAssembly构建支持及优化配置等。

最近偶然想学习下webpack的配置，于是走上了webpack4踩坑的不归路。。。

webpack4默认的特性：

配置默认初始化一些配置, 比如 entry 默认 './src' 开发模式和发布模式, 插件默认内置 CommonsChunk 配置简化
使用 ES6 语法，比如 Map, Set, includes 新增 WebAssembly 构建支持如果要使用 webpack
cli 命令，需要单独再安装 webpack-cli 废弃并移除了

CommonsChunkPlugin，并且使用一些默认值以及更容易被复写的新 API optimize.splitChunks
来代替，例如：

   optimization: {
      splitChunks: {
        chunks: 'all',
        name: 'common',
      },
      runtimeChunk: {
        name: 'runtime',
      }
    }

不再需要在 plugin 中设置 new webpack.optimize.UglifyJsPlugin

   ，只需要在配置中设置开关即可，并且 production 模式自动开启，可以通过 optimization.minimizer
   指定其他压缩库；

Webpack 4 提供了 sideEffects 的配置，引入的第三方插件在 package.json 里面配置
```
   sideEffects:false
```
extract-text-webpack-plugin 插件炸了，安装指定 extract-text-webpack-plugin 版本
@next，或者是用optimization.minimizer代替