溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
升級到webpack3，只需要通過npm安裝即可：
1 | npm install webpack@3.0.0 --save-dev |
webpack3幾乎與webpack2完美兼容，除了會影響一些插件的使用，官方給出的數據是：98%的用戶升級后，沒有影響webpack功能的正常使用。升級的時候可能會有一些相關的warning，但是一般不影響使用。
1 2 3 | npm WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed. npm WARN extract-text-webpack-plugin@2.1.0 requires a peer of webpack@^2.2.0 but none was installed. npm WARN html-webpack-plugin@2.28.0 requires a peer of webpack@1 || ^2 || ^2.1.0-beta || ^2.2.0-rc but none was installed. |
在之前的一篇文章webpack掃盲篇介紹過，webpack2處理后的每個模塊均被一個函數包裹，如下：
1 2 3 4 5 6 7 | /* 50 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { window.lib = {} ... /* harmony default export */ __webpack_exports__["a"] = (window.lib); /***/ }), |
這樣會帶來一個問題：降低瀏覽器中JS執行效率，這主要是閉包函數降低了JS引擎解析速度。
于是webpack團隊參考Closure Compiler和Rollup JS，將一些有聯系的模塊，放到一個閉包函數里面去，通過減少閉包函數數量從而加快JS的執行速度。
webpack3通過設置ModuleConcatenationPlugin使用這個新特性：
1 2 3 4 5 | module.exports = { plugins: [ new webpack.optimize.ModuleConcatenationPlugin() ] }; |
產出對比圖如下：
圖a：webpack2下的產出文件部分內容
圖b：webpack3下的產出文件部分內容
Scope Hoisting是基于ES Module的，對于Common.js和AMD的模塊不適用，不適用的情況下仍采用webpack2的模式。
在webpack2中引入了Code Splitting-Async的新方法import()，用于動態引入ES Module，webpack將傳入import方法的模塊打包到一個單獨的代碼塊（chunk），但是卻不能像require.ensure一樣，為生成的chunk指定chunkName，因此在webpack3中提出了Magic Comment用于解決該問題，用法如下：
1 | import(/* webpackChunkName: "my-chunk-name" */ 'module'); |
想了解webpack的未來，建議先過一下webpack的歷史。
webpack1支持CMD和AMD，同時擁有豐富的plugin和loader，webpack逐漸得到廣泛應用。
webpack2相對于webpack最大的改進就是支持ES Module，可以直接分析ES Module之間的依賴關系，而webpack1必須將ES Module轉換成CommonJS模塊之后，才能使用webpack進行下一步處理。除此之外webpack2支持tree sharking，與ES Module的設計思路高度契合。
webpack3相對于webpack2，過渡相對平穩，但是新的特性大都圍繞ES Module提出，如Scope Hoisting和Magic Comment；
總之，webpack的未來肯定是圍繞ES的支持度、構建速度與產出代碼的性能和用戶體驗來建設的，同時webpack的團隊已經承諾會根據社區的投票來決定新特性開發優先權。以下是公告中給出的未來的重點關注點：
高性能的構建緩存
提升初始化速度和增量構建效率
更好的支持Type Script
修訂長期緩存
支持WASM 模塊支持
提升用戶體驗
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
