Webpack4与3区别

╰半橙微兮° 2021-11-16 08:38 228阅读 0赞

webpack3的详细讲解请转到这里[https://www.jianshu.com/p/42e11515c10f][https_www.jianshu.com_p_42e11515c10f]

2018年8月25号webpack4正式发布。再次之后只要使用npm install webpack命令，默认安装的就是版本4。在不知道情况下，向我一样的小白就会跳入各种坑中。接下来我说说版本4与以前版本的区别之处。

# 安装 #

首先要重新安装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`进行模块划分，详细文档[看这里][Link 1]

官方的说法是默认设置已经对大部分用户来说非常棒了，但是需要注意一个问题，默认配置只会对异步请求的模块进行提取拆分，如果要对entry进行拆分，需要设置`optimization.splitChunks.chunks = 'all'`。其他的内容大家就自己研究吧。

对应之前我们拆分runtime的情况，现在也有一个配置`optimization.runtimeChunk`，设置为true就会自动拆分runtime文件

UglifyJsPlugin

现在也不需要使用这个plugin了，只需要使用optimization.minimize为true就行，production mode下面自动为true

optimization.minimizer可以配置你自己的压缩程序

[https_www.jianshu.com_p_42e11515c10f]: https://www.jianshu.com/p/42e11515c10f
[Link 1]: https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693