如何将webpack2项目升级到webpack3

3,778 阅读1分钟

如何升级

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

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

npm install webpack@3.0.0 --save-dev

新特性

范围提升(Scope Hoisting)

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

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

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

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

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

魔法注释(Magic Comments)

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

示例代码

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