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代替