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

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

resolve.extensions

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

resolve.*

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

module.loaders 現(xiàn)在轉(zhuǎn)換為 module.rules

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

鏈式loaders

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

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

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

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

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

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

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

移除了module.preloaders和module.postLoaders

UglifyJsPlugin sourceMap

UglifyJsPlugin 的 sourceMap 配置項現(xiàn)在默認為 false 而不是 true。

這意味著如果你在壓縮代碼時啟用了 source map，或者想要讓 uglifyjs 的警告能夠?qū)?yīng)到正確的代碼行，你需要將 UglifyJsPlugin 的 sourceMap 設(shè)為 true。

UglifyJsPlugin warnings 

UglifyJsPlugin 的 compress.warnings 配置項現(xiàn)在默認為 false 而不是 true。

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

UglifyJsPlugin minimize loaders

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

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

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

DedupePlugin 現(xiàn)在是被默認加載的

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

BannerPlugin 大變化

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

OccurrenceOrderPlugin 不再需要手動加入，現(xiàn)在是默認的

ExtractTextWebpackPlugin 大變化

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

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

新的ExtractTextPlugin插件的配置也發(fā)生了大變化

require.ensure和 AMD require 是異步的

現(xiàn)在這些函數(shù)總是異步的，而不是當 chunk 已經(jīng)加載過的時候同步調(diào)用它們的 callback。

注意 require.ensure 現(xiàn)在依賴于原生的 Promise。如果在不支持 Promise 的環(huán)境里使用 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 文檔的相關(guān)選項。

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

debug

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

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

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

ES6代碼分割

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

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

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

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

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

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

動態(tài)表達式

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

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

混合使用es6、AMD、CommonJS

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

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

Hints

模板字符串

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

配置中使用 Promise

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

高級 loader 匹配

ebpack 現(xiàn)在支持對 loader 進行更多方式的匹配。

延伸閱讀

• webpack1 新手入門教程 2017-07-25
• .NET插件技術(shù)-應(yīng)用程序熱升級 2017-07-19
• webpack2歸納總結(jié) 2017-07-16
• 前后端分離之vue2.0+webpack2 實戰(zhàn)項目 -- webpack介紹 2017-06-30
• 【樹莓派】【原】遠程連接樹莓派設(shè)備，以及進行遠程應(yīng)用更新與升級（新） 2017-06-27
• omi-cli新版發(fā)布-升級webpack2和支持sass生成組件局部CSS 2017-06-20
• Webpack2 資源管理 2017-06-15
• 簡單vue項目腳手架（vue+webpack2.0+vuex+vue-router） 2017-06-09
• webpack2.x基礎(chǔ)屬性講解(一) 2017-06-06
• JDFS:一款分布式文件管理實用程序第二篇(更新升級、解決一些bug) 2017-06-03

webpack1 新手入門教程