webpack4試水總結

 

看了官方的升級通告，聽說webpack4的打包效率提高近一倍，因而最近在項目分支上升級了下webpack4，過程當中的一些報錯及問題簡單整理下，以供交流。

在以前的舊項目上單純的升級webpack版本後，控制檯會逐個出現如下系列問題，須要逐個修改：

一、首先是關於CommonsChunkPlugin的報錯

CommonsChunkPlugin在webpack4中已被移除，是被移除的四個經常使用plugin之一（UglifyjsWebpackPlugin，CommonsChunkPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin），改用optimization.splitChunks和optimization.runtimeChunk替代。

二、沒法識別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']}
    ]
}

三、webpack.optimize.UglifyJsPlugin has been removed，如圖

webpack4基於零配置的思想，部分插件被移除，如webpack.optimize.UglifyJsPlugin在webpack4中已經被移除，在optimization對象中配置optimization.minimize=true便可，若是是生產環境的模式（mode：production）下，則該屬性默認爲true，默認壓縮。

四、webpack.NoErrorsPlugin is not a constructor，具體error如圖

該過濾error的插件需修改以下

new webpack.NoEmitOnErrorsPlugin(),

五、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

六、System.import() is deprecated and will be removed soon. Use import() instead.

這個warning目前沒有找到@angular/core版本的解決方案，warning的產生應該是angular/core源碼中使用了webpack中即將刪除的方法system.import，但願有這個warning解決方案的朋友告知下，謝謝哈

七、若是項目配置的是動態路由模式，webpack4中默認會生成相似0.js、1.js、2.js...這樣的默認模塊名稱。

 

若是須要語義化模塊名稱，須要在兩處進行配置：

一、在動態路由下的require.ensure方法裏配置（這裏項目使用的是react-router，因此就以此爲參考說明），require.ensure方法參數說明以下圖1，圖2即具體模塊名稱的配置

圖1

圖2

二、在webpack.config的output中須要開啓自定義的模塊名稱chunkFilename定義

而後build打包後，會發現bundule文件中就會出現剛纔配置的模塊名稱「login」

 

end