如何將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