摘要：名稱后自動自動補(bǔ)全的功能將被移除在配置時(shí)，官方不再允許省略擴(kuò)展名，的配置寫法上將逐步趨于嚴(yán)謹(jǐn)。使用自定義參數(shù)作為配置項(xiàng)傳入方式將做調(diào)整如果你隨意將自定義參數(shù)通過傳入到配置項(xiàng)中，如你會發(fā)現(xiàn)這將不會被允許，的執(zhí)行將會遵循更為嚴(yán)格的標(biāo)準(zhǔn)。

歡迎小伙伴們?yōu)? 前端導(dǎo)航平臺 點(diǎn)star
github倉庫： https://github.com/pfan123/fr...
訪問 前端導(dǎo)航平臺

Tree shaking 是一個(gè)術(shù)語，通常用來描述移除 JavaScript 上下文中無用代碼這個(gè)過程，或者更準(zhǔn)確的說是按需引用代碼，它依賴于 ES2015 模塊系統(tǒng)中 import/export 的靜態(tài)結(jié)構(gòu)特性。這個(gè)術(shù)語和概念實(shí)際上是興起于 ES2015 模塊打包工具 rollup。

webpack 2 原生支持ES6模塊 (別名 harmony modules) ，并能檢測出未使用的模塊輸出。

示例：舉一個(gè) maths.js 庫例子，它輸出兩個(gè)方法 square 和 cube：

// 這個(gè)函數(shù)沒有被其他地方引用過
export function square(x) {
    return x * x;
}

// 這個(gè)函數(shù)被引用了
export function cube(x) {
    return x * x * x;
}

在 main.js 中我們只引用 cube 方法：

import {cube} from "./maths.js";
console.log(cube(5)); // 125

運(yùn)行 node_modules/.bin/webpack main.js dist.js 并檢查 dist.js 可發(fā)現(xiàn) square 沒有被輸出:

/* ... webpackBootstrap ... */
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* unused harmony export square */
/* harmony export (immutable) */ __webpack_exports__["a"] = cube;
// 這個(gè)函數(shù)沒有被其他地方引用過
function square(x) {
  return x * x;
}

// 這個(gè)函數(shù)被引用了
function cube(x) {
  return x * x * x;
}

/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__maths_js__ = __webpack_require__(0);

console.log(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__maths_js__["a" /* cube */])(5)); // 125

/***/ })

上述三個(gè)選項(xiàng)將被合并為一個(gè)標(biāo)準(zhǔn)配置項(xiàng)：resolve.modules. 更多關(guān)于resolve的信息信息可查閱 resolving.

  resolve: {
-   root: path.join(__dirname, "src")
+   modules: [
+     path.join(__dirname, "src"),
+     "node_modules"
+   ]
  }

該配置項(xiàng)將不再要求強(qiáng)制轉(zhuǎn)入一個(gè)空字符串，而被改動到了resolve.enforceExtension下， 更多關(guān)于resolve的信息信息可查閱 resolving.

更多相關(guān)改動和一些不常用的配置項(xiàng)在此不一一列舉，大家如果在實(shí)際項(xiàng)目中用到可以到resolving)中進(jìn)行查看.

舊版本中l(wèi)oaders配置項(xiàng)將被功能更為強(qiáng)大的rules取代，同時(shí)考慮到新舊版本的兼容，之前舊版本的module.loaders的相關(guān)寫法仍舊有效，loaders中的相關(guān)配置項(xiàng)也依舊可以被識別。

新的loader配置規(guī)則會變得更加通俗易用，因此官方也非常推薦用戶能及時(shí)按module.rules中的相關(guān)配置進(jìn)行調(diào)整升級。

  module: {
-   loaders: [
+   rules: [
      {
        test: /.css$/,
-       loaders: [
+       use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
-           query: {
+           options: {
              modules: true
            }
          }
        ]
      },
      {
        test: /.jsx$/,
        loader: "babel-loader", // Do not use "use" here
        options: {
          // ...
        }
      }
    ]
  }

同webpack1.X中類似，loaders繼續(xù)支持鏈?zhǔn)綄懛ǎ蓪⑾嚓P(guān)正則匹配到的文件資源數(shù)據(jù)在幾個(gè)loader之間進(jìn)行共享傳遞，詳細(xì)使用說明可見 rule.use。

在wepback2中，用戶可通過use項(xiàng)來指定需要用到的loaders列表（官方推薦），而在weback1中，如果需要配置多個(gè)loaders則需要依靠簡單的 !符來切分，這種語法出于新舊兼容的考慮，只會在module.loaders中生效。

  module: {
-   loaders: {
+   rules: {
      test: /.less$/,
-     loader: "style-loader!css-loader!less-loader"
+     use: [
+       "style-loader",
+       "css-loader",
+       "less-loader"
+     ]
    }
  }

在配置loader時(shí)，官方不再允許省略-loader擴(kuò)展名，loader的配置寫法上將逐步趨于嚴(yán)謹(jǐn)。

  module: {
    rules: [
      {
        use: [
-         "style",
+         "style-loader",
-         "css",
+         "css-loader",
-         "less",
+         "less-loader",
        ]
      }
    ]
  }

當(dāng)然，如果你想繼續(xù)保持之前的省略寫法，你寫可以在resolveLoader.moduleExtensions中開啟默認(rèn)擴(kuò)展名配置，不過這種做法并不被推薦。

+ resolveLoader: {
+   moduleExtensions: ["-loader"]
+ }

可以從這里查看 #2986此次變更的原因；

當(dāng)我們需要讀取json格式文件時(shí)，我們不再需要安裝任何loader，webpack2中將會內(nèi)置 json-loader，自動支持json格式的讀?。ㄏ泊笃毡及。?。

  module: {
    rules: [
-     {
-       test: /.json/,
-       loader: "json-loader"
-     }
    ]
  }

為何需要默認(rèn)支持json格式官方的解釋是為了在webpack, node.js and browserify三種構(gòu)建環(huán)境下提供無差異的開發(fā)體驗(yàn)。

在webpack 1中的一些特殊的loader在讀取對應(yīng)資源時(shí)，需要通過require.resolve指定后才能指定生效。從webpack 2后，配置loader在直接從context中進(jìn)行讀取，這就解決了一些在使用“npm鏈接”或引用模塊之外的context造成的模塊重復(fù)導(dǎo)入的問題。

配置中可以刪除如下代碼：

  module: {
    rules: [
      {
        // ...
-       loader: require.resolve("my-loader")
+       loader: "my-loader"
      }
    ]
  },
  resolveLoader: {
-   root: path.resolve(__dirname, "node_modules")
  }

  module: {
-   preLoaders: [
+   rules: [
      {
        test: /.js$/,
+       enforce: "pre",
        loader: "eslint-loader"
      }
    ]
  }

之前需要用到preLoader的地方可以改到rules的enfore中進(jìn)行配置。

UglifyJsPlugin中的sourceMap 默認(rèn)項(xiàng)將從 true變?yōu)?false。

這就意味著當(dāng)你的js編譯壓縮后，需要繼續(xù)讀取原始腳本信息的行數(shù)，位置，警告等有效調(diào)試信息時(shí)，你需要手動開啟UglifyJsPlugin 的配置項(xiàng)：sourceMap: true 。

  devtool: "source-map",
  plugins: [
    new UglifyJsPlugin({
+     sourceMap: true
    })
  ]

UglifyJsPlugin中的 compress.warnings 默認(rèn)項(xiàng)將從 true變?yōu)?false。

這就意味著當(dāng)你想在編譯壓縮的時(shí)候查看一部分js的警告信息時(shí)，你需要將compress.warnings 手動設(shè)置為 true。

  devtool: "source-map",
  plugins: [
    new UglifyJsPlugin({
+     compress: {
+       warnings: true
+     }
    })
  ]

UglifyJsPlugin 將不再支持讓 Loaders 最小化文件的模式。debug 選項(xiàng)已經(jīng)被移除。Loaders 不能從 webpack 的配置中讀取到他們的配置項(xiàng)。

loade的最小化文件模式將會在webpack 3或者后續(xù)版本中被徹底取消掉.

為了兼容部分舊式loader，你可以通過 LoaderOptionsPlugin 的配置項(xiàng)來提供這些功能。

  plugins: [
+   new webpack.LoaderOptionsPlugin({
+     minimize: true
+   })
  ]

webpack.optimize.DedupePlugin 不再需要. 從你以前的配置移除這個(gè)配置選項(xiàng).

BannerPlugin 將不再允許接受兩個(gè)參數(shù)，而是只提供一個(gè)對象配置項(xiàng).

  plugins: [
-    new webpack.BannerPlugin("Banner", {raw: true, entryOnly: true});
+    new webpack.BannerPlugin({banner: "Banner", raw: true, entryOnly: true});
  ]

不需要再針對OccurrenceOrderPlugin進(jìn)行配置

  plugins: [
-   new webpack.optimize.OccurrenceOrderPlugin()
  ]

ExtractTextPlugin ] 1.0.0 在webpack v2將無法使用，你需要重新指定安裝ExtractTextPlugin 的webpack2的適配版本.

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

更新后的ExtractTextPlugin版本會針對wepback2進(jìn)行相應(yīng)的調(diào)整。

module: {
  rules: [
    test: /.css$/,
-    loader: ExtractTextPlugin.extract("style-loader", "css-loader", { publicPath: "/dist" })
+    loader: ExtractTextPlugin.extract({
+      fallbackLoader: "style-loader",
+      loader: "css-loader",
+      publicPath: "/dist"
+    })
  ]
}

plugins: [
-  new ExtractTextPlugin("bundle.css", { allChunks: true, disable: false })
+  new ExtractTextPlugin({
+    filename: "bundle.css",
+    disable: false,
+    allChunks: true
+  })
]

只有使用一個(gè)表達(dá)式的資源依賴引用(i. e. require(expr))，現(xiàn)在將創(chuàng)建一個(gè)空的context，而不是一個(gè)context的完整目錄。

當(dāng)在es2015的模塊化中無法工作時(shí)，請最好重構(gòu)這部分的代碼，如果無法進(jìn)行修改這部分代碼，你可以在ContextReplacementPlugin中來提示編譯器做出正確處理。

如果你隨意將自定義參數(shù)通過cli傳入到配置項(xiàng)中，如：

webpack --custom-stuff

// webpack.config.js
var customStuff = process.argv.indexOf("--custom-stuff") >= 0;
/* ... */
module.exports = config;

你會發(fā)現(xiàn)這將不會被允許，cli的執(zhí)行將會遵循更為嚴(yán)格的標(biāo)準(zhǔn)。

取而代之的是用一個(gè)接口來做傳遞參數(shù)配置。這應(yīng)該是新的代替方案，未來的工具開發(fā)也可能依賴于此。

webpack --env.customStuff

module.exports = function(env) {
  var customStuff = env.customStuff;
  /* ... */
  return config;
};

查看更多介紹 CLI.

require.ensure和amd require將默認(rèn)采用異步的加載方式來調(diào)用，而非之前的當(dāng)模塊請求加載完成后再在回調(diào)函數(shù)中同步觸發(fā)。

require.ensure將基于原生的Promise對象重新實(shí)現(xiàn)，當(dāng)你在使用 require.ensure 時(shí)請確保你的運(yùn)行環(huán)境默認(rèn)支持Promise對象，如果缺少則推薦使用安裝polyfill.

在webpack.config.js中將不再允許使用自定義屬性來配置loder，這直接帶來的一個(gè)影響是：在ts配置項(xiàng)中的自定義屬性將無法在被在webpack2中正確使用：

module.exports = {
  ...
  module: {
    rules: [{
      test: /.tsx?$/,
      loader: "ts-loader"
    }]
  },
  // does not work with webpack 2
  ts: { transpileOnly: false }
}

這是一個(gè)非常好的提問，嚴(yán)格意義上來說，custom property和options均是用于webpack loader的配置方式，從更通俗的說法上看，options應(yīng)該被稱作query，作為一種類似字符串的形式被追加到每一個(gè)loader的命名后面，非常類似我們用于url中的查詢字符串，但在實(shí)際應(yīng)用中功能要更為強(qiáng)大:

module.exports = {
  ...
  module: {
    rules: [{
      test: /.tsx?$/,
      loader: "ts-loader?" + JSON.stringify({ transpileOnly: false })
    }]
  }
}

options也可作為一個(gè)獨(dú)立的字面對象量，在loader的配置中搭配使用。

module.exports = {
  ...
  module: {
    rules: [{
      test: /.tsx?$/,
      loader: "ts-loader",
      options:  { transpileOnly: false }
    }]
  }
}

部分loader需要配置context信息， 并且支持從配置文件中讀取。這需要loader通過用長選項(xiàng)傳遞進(jìn)來，更多loader的明細(xì)配置項(xiàng)可以查閱相關(guān)文檔。

為了兼容部分舊式的loader配置，也可以采用如下插件的形式來進(jìn)行配置：

  plugins: [
+   new webpack.LoaderOptionsPlugin({
+     options: {
+       context: __dirname
+     }
+   })
  ]

debug作為loader中的一個(gè)調(diào)試模式選項(xiàng)，可以在webpack1的配置中靈活切換。在webpack2中，則需要loader通過用長選項(xiàng)傳遞進(jìn)來，更多l(xiāng)oader的明細(xì)配置項(xiàng)可以查閱相關(guān)文檔。

loder的debug模式在webpack3.0或者后續(xù)版本中將會被移除。

為了兼容部分舊式的loader配置，也可以采用如下插件的形式來進(jìn)行配置：

- debug: true,
  plugins: [
+   new webpack.LoaderOptionsPlugin({
+     debug: true
+   })
  ]

在webpack1中，你需要使用require.ensure實(shí)現(xiàn)chunks的懶加載，如：

require.ensure([], function(require) {
  var foo = require("./module");
});

在es2015的 loader中通過定義import()作為資源加載方法，當(dāng)讀取到符合ES2015規(guī)范的模塊時(shí)，可實(shí)現(xiàn)模塊中的內(nèi)容在運(yùn)行時(shí)動態(tài)加載。

webpack在處理import()時(shí)可以實(shí)現(xiàn)按需提取開發(fā)中所用到的模塊資源，再寫入到各個(gè)獨(dú)立的chunk中。webpack2已經(jīng)支持原生的 ES6 的模塊加載器了，這意味著 webpack 2 能夠理解和處理 import和export了。

import()支持將模塊名作為參數(shù)出入并且返回一個(gè)Promise對象。

function onClick() {
  import("./module").then(module => {
    return module.default;
  }).catch(err => {
    console.log("Chunk loading failed");
  });
}

這樣做的還有一個(gè)額外的好處就是當(dāng)我們的模塊加載失敗時(shí)也可以被捕獲到了，因?yàn)檫@些都會遵循Promise的標(biāo)準(zhǔn)來實(shí)現(xiàn)。

值得注意的地方：require.ensure的第三個(gè)參數(shù)選項(xiàng)允許使用簡單的chunk命名方式，但是import API中將不被支持，如果你希望繼續(xù)采用函數(shù)式的寫法，你可以繼續(xù)使用require.ensure。

require.ensure([], function(require) {
  var foo = require("./module");
}, "custom-chunk-name");

（注： System.import將會被棄用，webpack中將不再推薦使用 System.import，官方也推薦使用import進(jìn)行替換，詳見 v2.1.0-beta.28)

如果想要繼續(xù)使用Babel中提供的import，你需要獨(dú)立安裝 dynamic-import 插件并且選擇babel的Stage 3來捕獲時(shí)的錯(cuò)誤， 當(dāng)然這也可以根據(jù)實(shí)際情況來操作而不做強(qiáng)制約束。

現(xiàn)在import()中的傳參可支持部分表達(dá)式的寫法了，如果之前有接觸過CommonJS中require()表達(dá)式寫法，應(yīng)該不會對此感到陌生,（它的操作其實(shí)和 CommonJS 是類似的，給所有可能的文件創(chuàng)建一個(gè)環(huán)境，當(dāng)你傳遞那部分代碼的模塊還不確定的時(shí)候，webpack 會自動生成所有可能的模塊，然后根據(jù)需求加載。這個(gè)特性在前端路由的時(shí)候很有用，可以實(shí)現(xiàn)按需加載資源）

import() 會針對每一個(gè)讀取到的module創(chuàng)建獨(dú)立的separte chunk。

function route(path, query) {
  return import(`./routes/${path}/route`)
    .then(route => new route.Route(query));
}
// This creates a separate chunk for each possible route

在 AMD 和 CommonJS 模塊加載器中，你可以混合使用所有（三種）的模塊類型（即使是在同一個(gè)文件里面）。

// CommonJS consuming ES2015 Module
var book = require("./book");

book.currentPage;
book.readPage();
book.default === "This is a book";

// ES2015 Module consuming CommonJS
import fs from "fs"; // module.exports map to default
import { readFileSync } from "fs"; // named exports are read from returned object+

typeof fs.readFileSync === "function";
typeof readFileSync === "function";

注：es2015 balel 的默認(rèn)預(yù)處理會把 ES6 模塊加載器轉(zhuǎn)化成 CommonJS 模塊加載。要是想使用 webpack 新增的對原生 ES6 模塊加載器的支持，你需要使用 es2015-webpack 來代替，另外如果你希望繼續(xù)使用babel，則需要通過配置babel項(xiàng)，使其不會強(qiáng)制解析這部分的module symbols以便webpack能正確使用它們，babel的配置如下：

.babelrc

{
  "presets": [
    ["es2015", { "modules": false }]
  ]
}

No need to change something, but opportunities

webpack中的資源參數(shù)已經(jīng)開始支持模板字符串了，這意味著你可以使用如下的配置寫法：

- require("./templates/" + name);
+ require(`./templates/${name}`);

webpack現(xiàn)在在配置文件項(xiàng)中返回Promise了，這就允許你在配置中可以進(jìn)行一些異步的寫法了，如下所示：

webpack.config.js

module.exports = function() {
  return fetchLangs().then(lang => ({
    entry: "...",
    // ...
    plugins: [
      new DefinePlugin({ LANGUAGE: lang })
    ]
  }));
};

webpack中的loader配置支持如下寫法：

module: {
  rules: [
    {
      resource: /filename/, // matches "/path/filename.js"
      resourceQuery: /querystring/, // matches "/filename.js?querystring"
      issuer: /filename/, // matches "/path/something.js" if requested from "/path/filename.js"
    }
  ]
}

如下有更多的CLI 參數(shù)項(xiàng)可用:

--define process.env.NODE_ENV="production" 支持直接配置DefinePlugin.

--display-depth 能顯示每個(gè)entry中的module的資源深度

--display-used-exports 能顯示每個(gè)module中依賴使用了哪些資源.

--display-max-modules能限制顯示output中引用到的資源數(shù)量 (默認(rèn)顯示15個(gè)).

-p 指定當(dāng)前的編譯環(huán)境為生產(chǎn)環(huán)境，即修改：process.env.NODE_ENV 為 "production"

Loaders 現(xiàn)在默認(rèn)可被緩存。Loaders 如果不想被緩存，需要選擇不被緩存。

  // Cacheable loader
  module.exports = function(source) {
-   this.cacheable();
    return source;
  }

  // Not cacheable loader
  module.exports = function(source) {
+   this.cacheable(false);
    return source;
  }

webpack v1 只支持能夠「可 JSON.stringify的對象」作為 loader 的 options。

webpack2中的loader參數(shù)項(xiàng)中已經(jīng)可以支持任意的JS對象的寫法了。

使用復(fù)合選項(xiàng)時(shí)會有一個(gè)限制，你需要配置一個(gè)ident作為項(xiàng)來保證能正確引用到其他的loader，這意味著通過配置我們可以在內(nèi)聯(lián)寫法中去調(diào)用對應(yīng)依賴的加載器，如下：

require("some-loader??by-ident!resource")

{
  test: /.../,
  loader: "...",
  options: {
    ident: "by-ident",
    magic: () => return Math.random()
  }
}

v2.2.1之前（即從 v2.0.0 到 v2.2.0），使用 Complex options，需要在 options 對象上添加 ident，允許它能夠被其他 loader 引用。這在 v2.2.1 中被刪除，因此目前的遷移不再需要使用 ident 鍵。

{
  test: /.ext/
  use: {
    loader: "...",
    options: {
-     ident: "id",
      fn: () => require("./foo.js")
    }
  }
}

參考資料：
webpack2.0
webpack guide