近年來前端技術如雨后春筍般蓬勃發展，我們也在這個潮流下不斷地學習、成長。前端技術的不斷發展，給我們提供了許多的便利。例如：JSX的出現為我們提供了一個清晰、直觀的方式來描述組件樹，LESS/SASS的出現提高了我們書寫css的能力，AMD/CommonJS/ES6 的出現為我們模塊化開發提供了便利。然而，我們需要使用其它工具將這些工具轉化成原生語言以運行在瀏覽器上。為了能夠更好的將這些不同的資源整合到一起，我們就需要一個打包工具，webpack就是這個需求下的產物。
webpack 可以看做是模塊打包機。它做的事情是：分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。目前，webpack 總共發布了三個穩定版本。從17年八月底開始，經歷了長達五個月的開發周期，webpack 團隊通過增加大量新特性、bug修復、問題改善并于近期發布了 webpack 4.0.0 的 beta 版本。如果你對 webpack 感興趣，下面我們就來學習一下 webpack 4.0.0-beta.0 的新特性。
P.S. 以下所有代碼演示代碼都是基于 webpack 4.0.0-beta.0。

1、安裝webpack v4.0.0-beta.0

如果你使用yarn:

yarn add webpack@next webpack-cli --dev

如果你使用npm:

npm install webpack@next webpack-cli --save-dev

2、webpack 4.0.0.beta.0 新特性介紹

下面是一些你肯定會感興趣的新特性。如果閱讀完本章后還覺得不過癮，你可以再這查看完整的changelog。

本章將從以下幾部分來介紹 webpack 4.0.0-beta.0。

2.1 環境

webpack 運行環境升級。已經不支持 Node.js 4 版本。源碼升級到更高的 ECMAScript 版本。

根據 webpack package.json 配置中顯示 Node.js 最低支持版本：”node”: “>=6.11.5”

2.2 模塊

webpack 模塊類型及 .mjs 的支持：

長久以來，JS是webapck中唯一的模塊類型。正因此，開發者無法有效地打包其它類型的文件。目前，webpack實現了五種模塊類型，它們各有自己的優勢，可按需要使用（后面會詳細說明）。

1. javascript/auto: (webpack3中默認)支持所有的JS模塊系統：CommonJS、AMD、ESM。
2. javascript/esm: EcmaScript模塊，所有其他模塊系統不可用（.mjs文件中默認）。
3. javascript/dynamic: 不支持CommonJS和EcmaScript模塊。
4. json: JSON數據，可以通過require和import導入（.json文件默認）。
5. webassembly/experimental: WebAssembly模式（目前處于實驗性階段，.wasm文件默認）。

用法：

module.rules 中的 type 就是新增加的屬性，用來支持不同的模塊類型。

 module: {  rules: [{    test: //.special/.json$/,    type: "javascript/auto",    use: "special-loader"  }] }

此外，現在webpack 按照 .wasm, .mjs, .js, 以及 .json 等擴展名的順序來解析。

javascript/esm 相比于 javascript/auto 處理ESM更加嚴格:
具體表現在兩個方面：1. 導入的名稱必須存在于導入的模塊中。2. 動態的模塊（非ESM，例如CommonJS）只能通過默認 import 導入，其他所有（包括命名空間導入）的導入都會報錯。

2.3 用法

必須在 “開發或者生產” 中選擇一種模式（這里有一種隱藏模式 none，可以禁用一切功能）。

1）生產模式不支持監聽，開發模式針對快速增量重建進行了優化。
2）生產模式同樣支持模塊串聯，即變量提升（此功能在webpack 3 中已經實現）。
3）開發模式下支持注釋和提示，并且支持 eval 的source map。

將 CLI 移動到 webpack-cli 中，你需要通過安裝 webpack-cli 使用 CLI。

你可以使用 optimization.* 標志來配置自己的自定義模式。

webpackInclude 和 webpackExclude 可以通過神奇的注釋來支持 import() ，他們允許在使用動態表達式時過濾文件。
使用 System.import() 會發出警告:

1）可以使用 Rule.parser.system:true 關閉警告。
2）你也可以使用 Rule.parser.system:false 關閉 System.import()。

對于遷移到新的插件系統的插件 ProgressPlugin 現在顯示插件名稱。

webpack 現在可以本地處理 JSON。如果用 loader 轉換 json 為 js，需要設置： type:”javascript/auto”。當然，不用 loader webpack 依然可以正常工作。

2.4 配置

刪除了一些常用內置插件：

1）NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors (生產模式默認)。
2）ModuleConcatenationPlugin -> optimization.concatenateModules （生產模式默認）。
3）NamedModulesPlugin -> optimization.namedModules （開發模式默認）。

刪除了常用的 CommonsChunkPlugin -> optimization.splitChunks對于那些需要細粒度控制緩存策略的人，可以通過 optimization.splitChunks和 optimization.runtimeChunk。 現在可以使用 module.rules[].resolve來配置解析。它與全局配置合并。

optimization.minimize 用于控制minimizing的開關。 生產模式默認為開，開發模式默認為關。

optimization.minimizer 用于配置minimizers和選項。

許多支持占位符的配置選項現在也支持函數形式。

錯誤的 options.dependencies 配置現在會拋出異常。

sideEffects 可以通過 module.rules 覆蓋。

添加 output.globalObject 配置選項以允許在運行時選擇全局對象引用。

無需顯式設置entry和output屬性，webpack默認設置entry屬性為./src，output的屬性為./dist。

移除module.loaders。

2.5 優化

uglifyjs-webpack-plugin 升級到了 v 1，并且支持 ES6語法。

可以在 package.json 中配置 sideEffects:false 。當設置這個字段之后，標識在使用的庫里沒有任何副作用。這意味著webpack可以從代碼中安全地清除任何re-exports。

使用JSONP數組來代替JSONP函數