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