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。

混合使用es六、AMD、CommonJS

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

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

Hints

模板字符串

webpack 如今支持表達式中的模板字符串了。如今你能夠這樣使用：

配置中使用 Promise

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

高級 loader 匹配

ebpack 如今支持對 loader 進行更多方式的匹配。