Webpack 4与3的部分区别


安装

首先要重新安装webpack依赖包:
– 1 webpack
– 2 webpack-cli
– 2 各种配件升级,各种loader升级。如果在编译过程中报can not find xxx的错误,说明xxx对应的loader可能需要升级了,因为webpack4去掉了this.options的支持

在webpack4以后,webpack启动命令行的代码放入了webpack-cli 中。
如果只安装了webpack,那么它只能在nodejs中使用,不能再命令行中使用。

配置

mode

webpack增加了一个mode配置,只有两种值development | production。对不同的环境他会启用不同的配置,比如开发环境下启用optimization.nameModules(原nameModulesPlugin已经弃用),而生产环境默认弃用optimization.noEmitOnErrors(原noEmitOnErrorsPlugin先已弃用)。

不同环境下配置如下

– 1 默认生产环境开起了很多代码优化(minify, splite)。
– 2 开发时开启注视和验证,并加上了evel devtool。
– 3 生产环境不支持watching,开发环境优化了打包的速度。
– 4 生产环境开启模块串联(原ModulecondatenationPlugin)。
– 5 自动设置process.env.NODE_EVN到不同环境,也就是不使用DefinePlugin了。
– 6 如果mode设置none,所有默认设置都去掉了。

CommonsChunkPlugin

相信大家听说webpack升级到4,最大的感触就是去点了这个CommonsChunkPlugin,因为官方发的change log最大的篇幅就是介绍的他。
CommonsChunkPlugin删除之后,改成使用optimization.splitChunks进行模块划分,详细文档看这里。
官方的说法是默认设置已经对大部分用户来说非常棒了,但是需要注意一个问题,默认配置只会对异步请求的模块进行提取拆分,如果要对entry进行拆分,需要设置optimization.splitChunks.chunks = ‘all’。
对应之前我们拆分runtime的情况,现在也有一个配置optimization.runtimeChunk,设置为true就会自动拆分runtime文件。

UglifyJsPlugin

现在也不需要使用这个plugin了,只需要使用optimization.minimize为true就行,production mode下面自动为true。
optimization.minimizer可以配置你自己的压缩程序。