首頁 > web前端 > js教程 > 主體

Webpack3有哪些新特性

PHP中文网
發布: 2017-06-21 09:41:22
原創
2566 人瀏覽過

本文簡短地分享下最新發布的 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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板