webpack1.x 升級到 webpack2.x 英文文檔翻譯

近日項目要升級到webpack2.2,原來使用的webpack版本是1.12，在升級項目的同時，翻譯一下官方的升級文檔，去掉了一些不常用的配置.

resolve.root, resolve.fallback,resolve.modulesDirectories, ，這三個選項現在全部合并到resolve.modules一個選項中。關于resolving,查看更多  

resolve.extensions

這個配置項不再強制要求傳入一個空字符串，這個行為被移動到了resolve.enforceExtension配置項

resolve.*

更多不常用的配置項不再一一列出來，詳情請查看 resolving,查看更多。

module.loaders 現在轉換為 module.rules

 功能更強大的rules系統取代了老版本中的loader,但是老的moduler.loader寫法依然是被支持的，新的命名規則更加通俗易懂，非常建議使用新的module.rules。

鏈式loaders

同webpack1.x類似，鏈式loaders繼續支持鏈式寫法，匹配到的文件可以從一個loader傳遞到下一個loader,在新的rule.use配置項中，可以通過use項來指定需要用到的loader列表，在webpack1.x中需要用！來分割不同的loader,新版本只在module.loader中支持這種寫法。

現在在配置loader的時候不允許省略-loader擴展名，例如：style-loader不可以簡寫為style

如果你想繼續使用省略-loader的寫法，你可以在resolveLoader.moduleExtensions配置省略的-loader,不過不建議這么做

json-loader不再是必須的，無需再單獨安裝

在沒有為json文件配置loader的時候，webpack會默認自動使用json-loader來加載json文件

在 webpack 1 中，loader 默認配置下 resolve 相對于被匹配的文件。而在 webpack 2 中默認配置的 resolve 相對于 context 配置項。

這解決了一些問題，比如使用 npm link 或引用 context 之外的模塊時導致重復載入。

移除了module.preloaders和module.postLoaders

UglifyJsPlugin sourceMap

UglifyJsPlugin 的 sourceMap 配置項現在默認為 false 而不是 true。

這意味著如果你在壓縮代碼時啟用了 source map，或者想要讓 uglifyjs 的警告能夠對應到正確的代碼行，你需要將 UglifyJsPlugin 的 sourceMap 設為 true。

UglifyJsPlugin warnings 

UglifyJsPlugin 的 compress.warnings 配置項現在默認為 false 而不是 true。

這意味著如果你想要看到 uglifyjs 的警告信息，你需要將 compress.warnings 設為 true。

UglifyJsPlugin minimize loaders

UglifyJsPlugin 不再壓縮 loaders。在未來很長一段時間里，需要通過設置 minimize:true 來壓縮 loaders。參考 loader 文檔里的相關配置項。

loaders 的壓縮模式將在 webpack 3 或更高的版本中被取消。

為了兼容舊的 loaders，loaders 可以通過插件來切換到壓縮模式：

DedupePlugin 現在是被默認加載的

從你的配置文件中移除webpack.optimize.DedupePlugin 

BannerPlugin 大變化

BannerPlugin不再接收兩個參數，取而代之的是一個對象

OccurrenceOrderPlugin 不再需要手動加入，現在是默認的

ExtractTextWebpackPlugin 大變化

ExtractTextPlugin 1.0.0 不能在 webpack v2 下工作。 你需要安裝ExtractTextPlugin v2。

npm install --save-dev extract-text-webpack-plugin@beta

新的ExtractTextPlugin插件的配置也發生了大變化

require.ensure和 AMD require 是異步的

現在這些函數總是異步的，而不是當 chunk 已經加載過的時候同步調用它們的 callback。

注意 require.ensure 現在依賴于原生的 Promise。如果在不支持 Promise 的環境里使用 require.ensure，你需要添加 polyfill。

使用options來配置loader

在webpack.config.js中將不再允許使用自定義屬性來配置loder，例如：在ts配置項中的自定義屬性將無法在被在webpack2中正確使用：

options是什么？

嚴格來說，有兩種辦法，都可以用來配置 webpack 的 loader。典型的 options 被稱為 query，是一個可以被添加到 loader 名之后的字符串。它比較像一個 query string，但是實際上有更強大的能力：

不過它也可以分開來，寫成一個單獨的對象，緊跟在 loader 屬性后面：

LoaderOptionsPlugin context

有的 loader 需要從配置中讀取一些 context 信息。在未來很長一段時間里，這將需要通過 loader options 傳入。詳見 loader 文檔的相關選項。

為了保持對舊 loaders 的兼容，這些信息可以通過插件傳進來：

debug

在 webpack 1 中 debug 配置項切換 loaders 到 debug 模式。在將來很長一段時間里，這將需要通過 loader 配置項傳遞。詳見 loader 文檔的相關選項。

loaders 的 debug 模式將在 webpack 3 或后續版本中取消。

為了保持對舊 loaders 的兼容，loader 可以通過插件來切換到 debug 模式。

ES6代碼分割

在 webpack v1 中，你能使用 require.ensure 作為方法來懶加載 chunks 到你的應用中：

ES2015 模塊加載規范定義了 import() 方法來運行時動態地加載 ES2015 模塊。

webpack 將 import() 作為分割點并將被請求的模塊放到一個單獨的 chunk 中。

import() 接收模塊名作為參數，并返回一個 Promise。

好處是：如果加載 chunk 失敗，我們可以進行處理，因為現在它基于 Promise。

警告：require.ensure 允許用可選的第三個參數為 chunk 簡單命名，但是 import API 還未提供這個功能。如果你想要保留這個功能，你可以繼續使用 require.ensure。

動態表達式

可以傳遞部分表達式給 import()。這與 CommonJS 對表達式的處理方式一致（webpack 為所有可能匹配的文件創建 context）。

import() 為每一個可能的模塊創建獨立的 chunk。

混合使用es6、AMD、CommonJS

你可以自由混合使用三種模塊類型（甚至在同一個文件中）。在這個情況中 webpack 的行為和 babel 以及 node-eps 一致：

但是請注意，不能讓babe解析這些模塊，從而讓 webpack 可以使用它們。你可以通過設置如下配置到 .babelrc 或 babel-loader 來實現這一點。

Hints

模板字符串

webpack 現在支持表達式中的模板字符串了。現在你可以這樣使用：

配置中使用 Promise

webpack 現在支持在配置文件中返回 Promise 了。這讓你能在配置文件中做異步處理。

高級 loader 匹配

ebpack 現在支持對 loader 進行更多方式的匹配。