Webpack3有哪些新特性

本文簡短地分享下最新發布的 Webpack 3 中的新特性，供大家參考。

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中文網其他相關文章！