如何在webpack中定义加载器的优先级

How to define precendence of loaders in webpack?

本文关键字：加载 优先级 定义 webpack      更新时间：2023-09-26

我使用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"
  }
]

想法很简单:如果在第二个加载器中匹配regexp，它不应该被加载。它工作得很好，直到我加载这个:

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

它同时匹配加载器和加载到bundle的加载器。如何使null-loader优先级高于巴别塔?

你可以像webpack文档中描述的那样使用预加载器，基本上你将使用带有null-loader的regex作为预加载器，这样它将在你的加载器之前被解析。因此，如果regex匹配，将使用null-loader，它不会加载模块。

修改后的代码:

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"]
        }
    }
]

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

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"]
        }
    }
]
相关文章：