如何将webpack2项目升级到webpack3

如何升级

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