webpack4 踩坑记

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

webpack4默认的特性：

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

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

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

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

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

5. Webpack 4 提供了 sideEffects 的配置，引入的第三方插件在 package.json 里面配置

      sideEffects:false
   

6. extract-text-webpack-plugin 插件炸了，安装指定 extract-text-webpack-plugin 版本
   @next，或者是用optimization.minimizer代替