1. Webpack 3 的新功能

6 月 20 日，Webpack 發布了最新的 3.0 版本，並在 Medium 發布了公告。

Webpack 目前幾乎作為前端開發的標配，所以我們一起來看看新版中有哪些主要的功能更新。
整體相對於 2.0 變化不大，不必驚慌。
Webpack 2.0 的相關影片教學課程，可以參考我錄製的共 20 集的影片教學課程，Webpack 2 影片教學。
下面是 v3.0 Release 中的 Features List。

node_modules no longer mangle to ~ in stats [breaking change]
timeout for HMR requests is configurable
added experimental Scope Hoisting (webpack.optimize.ModuleConcatenationPlugin)
some performance improvements
added output.libraryExport to select an port for the library
sourceMapFilename now supports [contenthash] [breaking change]
module.noParse supports functions
module.noParse supports functions

add node: false option to disable all node specific additions

1.1 更新方法以及版本遷移

透過指令直接安裝即可，後面需要加上版本號。

npm install webpack@3.0.0 --save-dev

登入後複製

或
yarn add webpack@3.0.0 --dev
登入後複製
至於從Webpack 2 升級到Webpack 3，官方的原話是：

no effort beyond running the upgrade commands in your terminal

所以可以斷定，雖然版本號進行了大版本號的變更，不過並不會有太大的變化，可以鬆一口氣了。

1.2 Scope Hoisting

之前的每一個 module 都被包含在一個獨立的 function closures 中，這樣的處理方式就造成了在程式碼在瀏覽器中執行緩慢的問題。 開發團隊參考了 Closure Compiler 和 RollupJS 等框架後，將 function closures 的包裹方式變成了可設定的形式。 就是在之前的 plugins 中配置即可。

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

登入後複製

當然可能因為某些模組的載入而無法設定成功，官方提供了 CLI 的參數

--display-optimization-bailout

用於 debug 是什麼原因導致了設定失敗。

1.3 Magic Comments

其實就是可以指令 chunk name 了。

import(/* webpackChunkName: "my-chunk-name" */ 'module');

登入後複製

2. 接下來的新功能
更好的編譯快取
更快的第一次以及增量編譯速度
對TypeScript 更友善地支援
#修改Long term caching
##增加對WASM Module 的支援

使用者體驗的改進

#3.總結

整體看來變化不大，而且如# ##Magic Comments### 等功能就已經在2.4 的版本中發布了，個人感覺，發布一個3.0 的版本主要是團隊提供更好產品的一個決心像徵吧。 ###

以上是Webpack3有哪些新特性的詳細內容。更多資訊請關注PHP中文網其他相關文章！