如何将webpack2项目升级到webpack3

最新推荐文章于 2024-12-25 15:36:50 发布

weixin_33971130

最新推荐文章于 2024-12-25 15:36:50 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： webpack javascript 前端 ViewUI

原文链接：https://juejin.im/post/5948f2075c497d006b023906

本文介绍如何从Webpack 2平滑升级至3.0版本，并介绍其新特性，包括范围提升和魔法注释等，这些特性有助于提高打包效率及优化代码结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack2发布的时候，多少是有一些抱怨的。因为不能做到向下兼容，将1升级到2需要有不少的改动。但是值得庆幸的是，这次3.0的发布没有 beta 版本，完全向下兼容。

所以我们升级的时候直接执行下面的命令即可。

npm install webpack@3.0.0 --save-dev复制代码

我个人认为这是性能上的改进。按照官方的说法——范围提升是基于ECMAScript Module语法实现的一个特征。通过范围提升，webpack可以根据你正在使用什么样的模块和一些其他条件来回退到正常的捆绑。

具体使用起来也非常简单，只需要在配置中增加添加下面的插件即可：

module.exports = {  
      plugins: [
        new webpack.optimize.ModuleConcatenationPlugin()
      ]
};复制代码

为什么说范围提升是性能上的改进呢，因为使用范围提升后可以减少代码的体积并且提高在浏览器中的加载速度。

另外我们在使用webpack的时候可以加上参数--display-optimization-bailout，这可以告诉我们是什么导致打包方式回退到了普通的打包方式。

如果说范围提升是性能上的改进，那么魔法注释就是使用体验上的改进了。魔法注释要解决的问题是在2.0版本中使用动态导入语法（import()）时，不能像使用require.ensure一样创建命名chunk。当然它还有更多功能。

前端时间自己写了一个react脚手架，今天也升级到webpack3.0了，如果在升级中遇到困难的可以参考一下react-molin