javascript - 如何定义 webpack 中 loader 的优先级？

Question

我使用 webpack 构建服务器版本，配置如下:

loaders: [
  {
    test: /\.js$/,
    exclude: [/node_modules/],
    loader: "babel-loader",
    query: {
      presets: ["es2015", "react"],
      plugins: ["transform-object-rest-spread"]
    }
  }, {
    test: new RegExp(`/
      stardust
      |redux-form
      |axios
      |shuffle
    `),
    loader: "null-loader"
  }
]

想法非常简单:如果某些东西与第二个加载器中的正则表达式匹配，则不应加载它。在我加载此内容之前它运行良好:

import shuffle     from "shufflejs/dist/shuffle.min.js"

它与两个加载器匹配并加载到 bundle 中。如何使 null-loader 优先级高于 babel？

Answer 1

您可以使用预加载器，如 webpack documentation 中所述。基本上，您将使用带有空加载器的正则表达式作为预加载器，这样它将在加载器之前得到解决。因此，如果正则表达式匹配，将使用空加载器，并且不会加载模块。

修改后的代码如下:

preLoaders: [
    {
        test: new RegExp(`/
            stardust
            |redux-form
            |axios
            |shuffle
        `),
        loader: "null-loader"
    }
],
loaders: [
    {
        test: /\.js$/,
        exclude: [/node_modules/],
        loader: "babel-loader",
        query: {
            presets: ["es2015", "react"],
            plugins: ["transform-object-rest-spread"]
        }
    }
]

我能想到的唯一其他解决方案是依靠正则表达式来排除包含这些单词的文件。我不是正则表达式专家，但我会尝试建议一个表达式:

loaders: [
    {
        test: /^(?!stardust|redux-form|axios|shuffle)([a-zA-Z]+)\.js$/,
        exclude: [/node_modules/],
        loader: "babel-loader",
        query: {
            presets: ["es2015", "react"],
            plugins: ["transform-object-rest-spread"]
        }
    }
]