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