module.rule.parser

解析選項對象。所有應用的解析選項都將合并。

解析器(parser)可以查閱這些選項，并相應地禁用或重新配置。大多數(shù)默認插件，會如下解釋值：

將選項設置為 false，將禁用解析器。
將選項設置為 true，或不修改將其保留為 undefined，可以啟用解析器。
然而，一些解析器(parser)插件可能不光只接收一個布爾值。例如，內部的 NodeStuffPlugin 差距，可以接收一個對象，而不是 true，來為特定的規(guī)則添加額外的選項。

示例（默認的插件解析器選項）：

parser: {
  amd: false, // 禁用 AMD
  commonjs: false, // 禁用 CommonJS
  system: false, // 禁用 SystemJS
  harmony: false, // 禁用 ES2015 Harmony import/export
  requireInclude: false, // 禁用 require.include
  requireEnsure: false, // 禁用 require.ensure
  requireContext: false, // 禁用 require.context
  browserify: false, // 禁用特殊處理的 browserify bundle
  requireJs: false, // 禁用 requirejs.*
  node: false, // 禁用 __dirname, __filename, module, require.extensions, require.main 等。
  node: {...} // 在模塊級別(module level)上重新配置 [node](/configuration/node) 層(layer)
}

resolve.alias

創(chuàng)建 import 或 require 的別名，來確保模塊引入變得更簡單。例如，一些位于 src/ 文件夾下的常用模塊：

alias: {
  Utilities: path.resolve(__dirname, 'src/utilities/'),
  Templates: path.resolve(__dirname, 'src/templates/')
}

webpack-dev-server

devServer: {
  contentBase: path.join(__dirname, "dist"),
  compress: true,
  port: 9000
}

• devServer.after
• devServer.before

after(app){
  // do fancy stuff
}

• devServer.headers

headers: {
  "X-Custom-Foo": "bar"
}

• devServer.hot
  啟用 webpack 的模塊熱替換特性：

hot: true

devServer.proxy

如果你有單獨的后端開發(fā)服務器 API，并且希望在同域名下發(fā)送 API 請求 ，那么代理某些 URL 會很有用。

dev-server 使用了非常強大的 http-proxy-middleware 包。更多高級用法，請查閱其文檔。

在 localhost:3000 上有后端服務的話，你可以這樣啟用代理：

proxy: {
  "/api": "http://localhost:3000"
}

請求到 /api/users 現(xiàn)在會被代理到請求 http://localhost:3000/api/users。

如果你不想始終傳遞 /api ，則需要重寫路徑：

proxy: {
  "/api": {
    target: "http://localhost:3000",
    pathRewrite: {"^/api" : ""}
  }
}

默認情況下，不接受運行在 HTTPS 上，且使用了無效證書的后端服務器。如果你想要接受，修改配置如下：

proxy: {
  "/api": {
    target: "https://other-server.example.com",
    secure: false
  }
}

有時你不想代理所有的請求?？梢曰谝粋€函數(shù)的返回值繞過代理。

在函數(shù)中你可以訪問請求體、響應體和代理選項。必須返回 false 或路徑，來跳過代理請求。

例如：對于瀏覽器請求，你想要提供一個 HTML 頁面，但是對于 API 請求則保持代理。你可以這樣做：

proxy: {
  "/api": {
    target: "http://localhost:3000",
    bypass: function(req, res, proxyOptions) {
      if (req.headers.accept.indexOf("html") !== -1) {
        console.log("Skipping proxy for browser request.");
        return "/index.html";
      }
    }
  }
}

If you want to proxy multiple, specific paths to the same target, you can use an array of one or more objects with a context property:

proxy: [{
  context: ["/auth", "/api"],
  target: "http://localhost:3000",
}]

Devtool

此選項控制是否生成，以及如何生成 source map。
devtool 構建速度 重新構建速度 生產(chǎn)環(huán)境 品質(quality)
(none) +++ +++ yes 打包后的代碼
eval +++ +++ no 生成后的代碼
cheap-eval-source-map + ++ no 轉換過的代碼（僅限行）
cheap-module-eval-source-map o ++ no 原始源代碼（僅限行）
eval-source-map -- + no 原始源代碼
cheap-source-map + o no 轉換過的代碼（僅限行）
cheap-module-source-map o - no 原始源代碼（僅限行）
inline-cheap-source-map + o no 轉換過的代碼（僅限行）
inline-cheap-module-source-map o - no 原始源代碼（僅限行）
source-map -- -- yes 原始源代碼
inline-source-map -- -- no 原始源代碼
hidden-source-map -- -- yes 原始源代碼
nosources-source-map -- -- yes 無源代碼內容

對于開發(fā)環(huán)境

以下選項非常適合開發(fā)環(huán)境：

eval - 每個模塊都使用 eval() 執(zhí)行，并且都有 //@ sourceURL。此選項會非?？斓貥嫿āＶ饕秉c是，由于會映射到轉換后的代碼，而不是映射到原始代碼（沒有從 loader 中獲取 source map），所以不能正確的顯示行數(shù)。

eval-source-map - 每個模塊使用 eval() 執(zhí)行，并且 source map 轉換為 DataUrl 后添加到 eval() 中。初始化 source map 時比較慢，但是會在重新構建時提供比較快的速度，并且生成實際的文件。行數(shù)能夠正確映射，因為會映射到原始代碼中。它會生成用于開發(fā)環(huán)境的最佳品質的 source map。

cheap-eval-source-map - 類似 eval-source-map，每個模塊使用 eval() 執(zhí)行。這是 "cheap(低開銷)" 的 source map，因為它沒有生成列映射(column mapping)，只是映射行數(shù)。它會忽略源自 loader 的 source map，并且僅顯示轉譯后的代碼，就像 eval devtool。

cheap-module-eval-source-map - 類似 cheap-eval-source-map，并且，在這種情況下，源自 loader 的 source map 會得到更好的處理結果。然而，loader source map 會被簡化為每行一個映射(mapping)。

對于生產(chǎn)環(huán)境

這些選項通常用于生產(chǎn)環(huán)境中：

(none)（省略 devtool 選項） - 不生成 source map。這是一個不錯的選擇。

source-map - 整個 source map 作為一個單獨的文件生成。它為 bundle 添加了一個引用注釋，以便開發(fā)工具知道在哪里可以找到它。

你應該將你的服務器配置為，不允許普通用戶訪問 source map 文件！

hidden-source-map - 與 source-map 相同，但不會為 bundle 添加引用注釋。如果你只想 source map 映射那些源自錯誤報告的錯誤堆棧跟蹤信息，但不想為瀏覽器開發(fā)工具暴露你的 source map，這個選項會很有用。

你不應將 source map 文件部署到 web 服務器。而是只將其用于錯誤報告工具。

nosources-source-map - 創(chuàng)建的 source map 不包含 sourcesContent(源代碼內容)。它可以用來映射客戶端上的堆棧跟蹤，而無須暴露所有的源代碼。你可以將 source map 文件部署到 web 服務器。

這仍然會暴露反編譯后的文件名和結構，但它不會暴露原始代碼。

在使用 uglifyjs-webpack-plugin 時，你必須提供 sourceMap：true 選項來啟用 source map 支持。

Watch 和 WatchOptions

webpack 可以監(jiān)聽文件變化，當它們修改后會重新編譯。

webpack --watch --progress

Externals

externals 配置選項提供了「從輸出的 bundle 中排除依賴」的方法。相反，所創(chuàng)建的 bundle 依賴于那些存在于用戶環(huán)境(consumer's environment)中的依賴。此功能通常對 library 開發(fā)人員來說是最有用的，然而也會有各種各樣的應用程序用到它。

防止將某些 import 的包(package)打包到 bundle 中，而是在運行時(runtime)再去從外部獲取這些擴展依賴(external dependencies)。

例如，從 CDN 引入 jQuery，而不是把它打包：

index.html

<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>

webpack.config.js

externals: {
  jquery: 'jQuery'
}

這樣就剝離了那些不需要改動的依賴模塊，換句話，下面展示的代碼還可以正常運行：

import $ from 'jquery';
$('.my-element').animate(...);

列子：

externals : {
  lodash : {
    commonjs: "lodash",
    amd: "lodash",
    root: "_" // 指向全局變量
  }
}
externals : {
  subtract : {
    root: ["math", "subtract"]
  }
}

此語法用于描述外部 library 所有可用的訪問方式。這里 lodash 這個外部 library 可以在 AMD 和 CommonJS 模塊系統(tǒng)中通過 lodash 訪問，但在全局變量形式下用 _ 訪問。subtract 可以通過全局 math 對象下的屬性 subtract 訪問（例如 window['math']['subtract']）。