看了官方的升級通告，據說webpack4的打包效率提升近一倍，於是最近在項目分支上升級了下webpack4，過程中的一些報錯及問題簡單整理下，以供交流。
在之前的舊項目上單純的升級webpack版本后，控制台會逐個出現以下系列問題，需要逐個修改：
1、首先是關於CommonsChunkPlugin的報錯
CommonsChunkPlugin在webpack4中已被移除，是被移除的四個常用plugin之一（UglifyjsWebpackPlugin，CommonsChunkPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin），改用optimization.splitChunks和optimization.runtimeChunk替代。
2、無法識別ts文件導致的報錯（error：'app.module.ts is not a module' || 'you may need an appropriate loader to handle this file type'），如圖
這里的問題是由於webpack的配置文件中關於ts-loader的語法問題導致，修改成如下的語法即可
module: {
rules: [
{test: /\.tsx?$/,loaders: ['ts-loader']}
]
}
3、webpack.optimize.UglifyJsPlugin has been removed，如圖
webpack4基於零配置的思想，部分插件被移除，如webpack.optimize.UglifyJsPlugin在webpack4中已經被移除，在optimization對象中配置optimization.minimize=true即可，如果是生產環境的模式（mode：production）下，則該屬性默認為true，默認壓縮。
4、webpack.NoErrorsPlugin is not a constructor，具體error如圖
該過濾error的插件需修改如下
new webpack.NoEmitOnErrorsPlugin(),
5、45:15-36 Critical dependency: the request of a dependency is an expression
解決warning，需在plugins中添加以下插件代碼
// Workaround for angular/angular#11580
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core/,
path.resolve(__dirname, './')
),此處需要使用上下文替換插件進行相關規則的替換，詳見angular&webpack簡介，ContextReplacementPlugin
6、System.import() is deprecated and will be removed soon. Use import() instead.
這個warning目前沒有找到@angular/core版本的解決方案，warning的產生應該是angular/core源碼中使用了webpack中即將刪除的方法system.import，希望有這個warning解決方案的朋友告知下，謝謝哈
7、如果項目配置的是動態路由模式，webpack4中默認會生成類似0.js、1.js、2.js...這樣的默認模塊名稱。
如果需要語義化模塊名稱，需要在兩處進行配置：
1、在動態路由下的require.ensure方法里配置（這里項目使用的是react-router，所以就以此為參考說明），require.ensure方法參數說明如下圖1，圖2即具體模塊名稱的配置
圖1
圖2
2、在webpack.config的output中需要開啟自定義的模塊名稱chunkFilename定義
然后build打包后，會發現bundule文件中就會出現剛才配置的模塊名稱“login”
end