Webpack 2+：如何为具有相同扩展名的文件应用不同的加载器？

Question

这是我的用例：大多数 svg 应该是内联的。所以我设置了这样的规则：

{test: /\.svg$/, use: "svg-inline-loader"},

在某些情况下，我只想要 svg 的 url 而不是内联它。在 webpack 1.x 中，我这样要求它们：require('path/to/file.svg?external').

这是相应的规则：

{test: /\.svg\?external$/, use: "file-loader!image-webpack-loader"},

似乎 webpack 2 在 test 寻找规则时不再包含 ? 部分，因为只有第一条规则被应用到 all 迁移后我的 svgs。

有办法解决这个问题吗？在 require 对相同扩展名的文件应用不同的加载程序集时，是否可能有不同的策略？

PS：我知道我可能需要这样的文件：require('!file-loader!image-webpack-loader!path/to/file.svg') 但我的加载程序比这复杂一点，我不想重复所有的配置时间.

PSS：这个好像也不行（还是只适用第一条规则）

{test: /\.svg$/, use: "svg-inline-loader", exclude: /\?external/},
{test: /\.svg$/, use: "file-loader?!image-webpack-loader", include: /\?external/}

Answer 1

除了test，您还可以指定include/exclude条件。来自 docs on configuration options:

{
    test: /\.jsx?$/,
    include: [
      path.resolve(__dirname, "app")
    ],
    exclude: [
      path.resolve(__dirname, "app/demo-files")
    ]
    // these are matching conditions, each accepting a regular expression or string
    // test and include have the same behavior, both must be matched
    // exclude must not be matched (takes preferrence over test and include)
    // Best practices:
    // - Use RegExp only in test and for filename matching
    // - Use arrays of absolute paths in include and exclude
    // - Try to avoid exclude and prefer include
}

Answer 2

resolveLoader.alias 将为您解决。

您的配置将如下所示：

resolveLoader: {
  alias: {
    myLoader1: "svg-inline-loader", // and much more
    myLoader2: "file-loader!image-webpack-loader" // and much more
  }
}

和用法：

require('myLoader1!path/to/file1.svg');
require('myLoader2!path/to/file2.svg');

或者，如果您希望将 myLoader1 配置设为默认配置，并且不时使用 myLoader2 加载器，请使用这种配置：

{
  test: /\.svg$/,
  use: "svg-inline-loader" // and much more
}

// ...

resolveLoader: {
  alias: {
    myLoader: "file-loader!image-webpack-loader" // and much more
  }
}

并像这样使用：

require('path/to/file1.svg'); // default svg-inline-loader
require('!myLoader!path/to/file2.svg'); // specific file-loader!image-webpack-loader
// ! at the beginning - disables loaders from default
// and myLoader enables file-loader and image-webpack-loader

PS。我有类似的问题它适用于 webpack 1 但文档说 resolveLoader.alias 工作相同。

Answer 3

所以我最近参加了 webpack 的 Juho Vepsäläinen 的演讲并在 this slide 中找到了答案：

{
  test: /.css$/,

  oneOf: [
    {
      resourceQuery: /inline/, // foo.css?inline
      use: 'url-loader',
    },
    {
      resourceQuery: /external/, // foo.css?external
      use: 'file-loader',
    },
  ],
}

resourceQuery 救援！

Webpack 2+：如何为具有相同扩展名的文件应用不同的加载器？

Webpack 2+: How to apply different loaders for files with same extension?

webpack

webpack-2