摘要：把他設(shè)置為以在其他之前或之后進(jìn)行處理?；诓紶栔档淖侄慰捎糜谶M(jìn)一步進(jìn)行約束不匹配給定條件參見(jiàn)表示接受的值。同時(shí)匹配一系列條件。將此添加到你的配置即可檢查其中的數(shù)據(jù)流，而不必在中插入。

原文鏈接：https://survivejs.com/webpack...
翻譯計(jì)劃：https://segmentfault.com/a/11...
附言：因?yàn)榘l(fā)現(xiàn)書(shū)中一些內(nèi)容多帶帶放出來(lái)會(huì)比較尷尬，所以會(huì)跳過(guò)部分章節(jié)，當(dāng)然完整版會(huì)全部翻譯，已經(jīng)正在研究原版的網(wǎng)站搭建工程了

Webpack 提供了多種配置模塊 loader 的方法。 Webpack 2 開(kāi)始通過(guò)引入 use 字段，簡(jiǎn)化了 loader 使用。在這里使用絕對(duì)路徑是一個(gè)好主意，因?yàn)樗鼈冊(cè)试S你在不影響構(gòu)建的情況下移動(dòng)配置。

另一種方法是設(shè)置 context 字段，因?yàn)檫@會(huì)產(chǎn)生類(lèi)似的效果并影響 entry 和 loader 的路徑解析。但是它對(duì)輸出沒(méi)有影響，你仍然需要使用絕對(duì)路徑或 /。

即使你設(shè)置了 include 或 exclude 規(guī)則，從 node_modules 加載的包仍然可以正常工作，因?yàn)樗鼈円呀?jīng)被編譯為開(kāi)箱即用的代碼。如果它們沒(méi)這么做，那么你必須應(yīng)用 Consuming Packages 章節(jié)中涵蓋的技術(shù)。

T> include/exclude 在處理 node_modules 問(wèn)題時(shí)非常方便，因?yàn)楫?dāng)你將 JavaScript 文件導(dǎo)入項(xiàng)目時(shí)，webpack 會(huì)默認(rèn)處理并遍歷已安裝的包。為了讓 webpack 不處理 node_modules，你需要使用 exclude。其他文件類(lèi)型不會(huì)遇到此問(wèn)題。

Webpack 通過(guò) loader 支持多種格式的文件。此外，它支持一些開(kāi)箱即用的 JavaScript 模塊規(guī)范。文件格式不同，但思路都是一致的，你必須設(shè)置一個(gè)或多個(gè) loader，并將它們與你的目錄結(jié)構(gòu)連接起來(lái)。

{pagebreak}

下例中 webpack 通過(guò) Babel 處理 JavaScript：

webpack.config.js

module.exports = {
  ...
  module: {
    rules: [
      {
        // **Conditions** to match files using RegExp, function.
        test: /.js$/,

        // **Restrictions**
        // Restrict matching to a directory. This
        // also accepts an array of paths or a function.
        // The same applies to `exclude`.
        include: path.join(__dirname, "app"),
        exclude(path) {
          // You can perform more complicated checks  as well.
          return path.match(/node_modules/);
        },

        // **Actions** to apply loaders to the matched files.
        use: "babel-loader",
      },
    ],
  },
};

T> 如果你對(duì) RegExp 的匹配不熟悉，可以使用在線工具，例如 regex101，RegExr 或 Regexper。

一定要記住 loader 總是從右到左，從下到上（拆開(kāi)寫(xiě)的時(shí)候）進(jìn)行運(yùn)算的。把它看成函數(shù)比較容易理解所謂“從右到左運(yùn)行”。你可以把 use: ["style-loader", "css-loader"] 看作 style(css(input))。

要查看規(guī)則，請(qǐng)看以下示例：

{
  test: /.css$/,
  use: ["style-loader", "css-loader"],
},

根據(jù)從右到左的規(guī)則，可以等效拆分為：

{
  test: /.css$/,
  use: "style-loader",
},
{
  test: /.css$/,
  use: "css-loader",
},

盡管可以使用上述規(guī)則配置，但是也可以強(qiáng)制在常規(guī)規(guī)則之前或之后應(yīng)用特定規(guī)則。enforce 字段在這里可以派上用場(chǎng)。把他設(shè)置為 pre or post 以在其他 loader 之前或之后進(jìn)行處理。

Lint 是一個(gè)很好的例子，因?yàn)?Lint 必須先于任何其他行為。enforce: "post" 倒是很少用到，這多是你想對(duì)構(gòu)建結(jié)果進(jìn)行檢查時(shí)使用的。

{pagebreak}

基本語(yǔ)法如下：

{
  // Conditions
  test: /.js$/,
  enforce: "pre", // "post" too

  // Actions
  use: "eslint-loader",
},

如果你可以保證 test 中的 loader 順序無(wú)誤，那么可以不使用 enforce。不過(guò)使用 enforce 方便你把不同步驟的 loader 分離開(kāi)來(lái)，更容易組織。

可通過(guò) query 把參數(shù)傳到 loader：

{
  // Conditions
  test: /.js$/,
  include: PATHS.app,

  // Actions
  use: "babel-loader?presets[]=env",
},

這種配置風(fēng)格也適用于 entry 和 import，webpack 會(huì)處理他們。在某些個(gè)別情況下，這個(gè)寫(xiě)法能派上用場(chǎng)，但通常情況下最好使用以下更具可讀性的方案。

{pagebreak}

傳入對(duì)象到 use：

{
  // Conditions
  test: /.js$/,
  include: PATHS.app,

  // Actions
  use: {
    loader: "babel-loader",
    options: {
      presets: ["env"],
    },
  },
},

如果你想使用多個(gè) loader，你可以將一個(gè)對(duì)象數(shù)組傳遞給 use：

{
  test: /.js$/,
  include: PATHS.app,

  use: [
    {
      loader: "babel-loader",
      options: {
        presets: ["env"],
      },
    },
    // Add more loaders here
  ],
},

{pagebreak}

本書(shū)中，你在更高級(jí)別上進(jìn)行環(huán)境配置。實(shí)現(xiàn)類(lèi)似結(jié)果的另一個(gè)選擇是在 use 處使用分支，因?yàn)?webpack 的 loader 定義接受函數(shù)作為參數(shù)，你可以通過(guò)此函數(shù)區(qū)分環(huán)境：

{
  test: /.css$/,

  // `resource` refers to the resource path matched.
  // `resourceQuery` contains possible query passed to it
  // `issuer` tells about match context path
  use: ({ resource, resourceQuery, issuer }) => {
    // You have to return something falsy, object, or a
    // string (i.e., "style-loader") from here.
    //
    // Returning an array fails! Nest rules instead.
    if (env === "development") {
      return {
        use: {
          loader: "css-loader", // css-loader first
          rules: [
            "style-loader", // style-loader after
          ],
        },
      };
    }
  },
},

用心感受，這是組合配置的另一種手段。

盡管配置級(jí) loader 定義更可取，但可以內(nèi)聯(lián)編寫(xiě) loader 定義：

// Process foo.png through url-loader and other
// possible matches.
import "url-loader!./foo.png";

// Override possible higher level match completely
import "!!url-loader!./bar.png";

這種方法的問(wèn)題在你的源代碼會(huì)與 webpack 耦合。相同的機(jī)制還適用于 entry：

{
  entry: {
    app: "babel-loader!./app",
  },
},

test 結(jié)合 include 或 exclude 是匹配文件的最常用方法。這些字段接受以下數(shù)據(jù)類(lèi)型：

test——匹配 RegExp，字符串，函數(shù)，對(duì)象或數(shù)組。

include——同上。

exclude——同上，輸出與 include 相反。

resource: /inline/——匹配包含查詢內(nèi)容的資源路徑。示例：/path/foo.inline.js, /path/bar.png?inline。

issuer: /bar.js/——匹配從某處請(qǐng)求的資源。示例：如果 /path/foo.png 從 /path/bar.js 請(qǐng)求，那么 /path/foo.png 將匹配。

resourcePath: /inline/——匹配包含查詢內(nèi)容的資源路徑（不包括 query）。示例：/path/foo.inline.png。

resourceQuery: /inline/——匹配包含查詢內(nèi)容的 query（不包括 query）。示例：/path/foo.png?inline。

基于布爾值的字段可用于進(jìn)一步進(jìn)行約束：
Boolean based fields can be used to constrain these matchers further:

not——不匹配給定條件（參見(jiàn)test表示接受的值）。

and——同時(shí)匹配一系列條件。

or——與數(shù)組中其中一個(gè)條件匹配。

oneOf 字段可以根據(jù)資源相關(guān)匹配將 webpack 路由到特定的 loader：

{
  test: /.png$/,
  oneOf: [
    {
      resourceQuery: /inline/,
      use: "url-loader",
    },
    {
      resourceQuery: /external/,
      use: "file-loader",
    },
  ],
},

如果你需要在文件名中查詢，應(yīng)該使用 resourcePath 而不是 resourceQuery。

{pagebreak}

issuer 基于資源的導(dǎo)入位置進(jìn)行操作。以下示例改編自 css-loader issue 287，style-loader 將應(yīng)用于 JavaScript 導(dǎo)入的 CSS 文件：

{
  test: /.css$/,

  rules: [
    {
      issuer: /.js$/,
      use: "style-loader",
    },
    {
      use: "css-loader",
    },
  ],
},

另一種方法結(jié)合了 issuer 和 not：

{
  test: /.css$/,

  rules: [
    // CSS imported from other modules is added to the DOM
    {
      issuer: { not: /.css$/ },
      use: "style-loader",
    },
    // Apply css-loader against CSS imports to return CSS
    {
      use: "css-loader",
    },
  ],
}

通過(guò)觀察 loader 行為可以更深入地理解它們。 loader-runner 允許你在沒(méi)有 webpack 的情況下多帶帶運(yùn)行它們。Webpack 在底層也是使用此軟件包，Extending with Loaders 章節(jié)將會(huì)詳細(xì)介紹它。

inspect-loader 可以監(jiān)視 loader 之間傳遞的內(nèi)容。將此 loader 添加到你的配置即可檢查其中的數(shù)據(jù)流，而不必在 node_modules 中插入 console.log。

Webpack 提供了多種設(shè)置 loader 的方法，但在 webpack 4 中用好 use 就足夠了。注意 loader 的處理順序，這是很多常見(jiàn)的問(wèn)題來(lái)源。

回顧一下：

Loaders 決定了 webpack 的模塊解析機(jī)制匹配到文件時(shí)應(yīng)該作何處理。

loader 定義包括用于匹配的條件（conditions），以及匹配成功需要進(jìn)行的動(dòng)作（actions）。

Webpack 2 引入了use字段。它將以前的 loader 和 loaders 字段結(jié)合到了一起。

Webpack 4 提供了多種匹配和改變 loader 行為的方法。例如，你可以在匹配 loader 后進(jìn)行 resource query 匹配，指引 loader 進(jìn)行特定操作。

在下一章中，你將學(xué)習(xí)使用 webpack 加載圖片。