web-dev-qa-db-ja.com

Webpack 2+：同じ拡張子のファイルに異なるローダーを適用するにはどうすればよいですか？

これが私のユースケースです：ほとんどの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"},
_

移行後、最初のルールのみがall my svgsに適用されているため、ルールのtesting時にwebpack 2に_?_部分が含まれなくなったようです。

これを回避する方法はありますか？同じ拡張子のファイルを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/}
_
webpackwebpack-2
10
Daniel

それで私は最近webpackのJuhoVepsäläinenによる講演に参加し、その答えを このスライド で見つけました：

{
  test: /.css$/,

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

resourceQuery 救助に！

19
Daniel

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同じように機能します。

8
Everettss

testに加えて、include/exclude条件を指定できます。 構成オプションに関するドキュメント から：

{
    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
}
1
simon04