近來有時想進修下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替代