webpack4踩坑記

近來有時想進修下webpack的設置，因而走上了webpack4踩坑的不歸路。。。

webpack4默許的特徵：

1. 設置默許初始化一些設置, 比方 entry 默許 &＃8216;./src&＃8217; 開闢形式和宣布形式, 插件默許內置 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替代