web-dev-qa-db-ja.com

Webpack url-loaderセットの宛先パス

私はwebpackのurl-loaderプラグインを使用しており、次のように構成しています。

{
    test: /\.(ttf|eot|woff|woff2|svg)$/,
    loader: "url-loader?limit=50000"
}

ファイルシステムに50kを超えるファイルを出力しますが、宛先パスを設定する方法が見つかりません。

この場合、ファイルをルートではなく./fontsに保存します。

webpackurlloader
17
user3900456

url-loaderはfile-loaderに基づいて構築されているため、次に示すように、file-loaderのように使用できます。

{
    test: /\.(ttf|eot|woff|woff2|svg)$/,
    loader: "url-loader?limit=50000&name=fonts/[name].[ext]"
}
26
wandergis

このように書けます

{
        test: /\.(png|woff|eot|ttf|svg|gif)$/,
        use: [
          {
          loader: 'url-loader',
          options: {
            limit: 1000, // if less than 10 kb, add base64 encoded image to css
            name: "assets/[hash].[ext]" // if more than 10 kb move to this folder in build using file-loader
          }
        }]
      }
10
Johansrk

@ wandergis による回答に追加するには、url-loaderはサイズ制限を超えた場合に画像の名前を変更し、名前にハッシュを使用します。推奨される[name].[ext]を使用する場合、ファイルの元の名前を使用しますが、これは私が必要としたものではありません。 url-loaderが作成するハッシュの名前が必要でした。したがって、[hash].[ext]を追加して、名前を変更したファイルを取得できます。

{
    test: /\.(ttf|eot|woff|woff2|svg)$/,
    loader: "url-loader?limit=50000&name=fonts/[hash].[ext]"
}
7
David Glass

これを行うこともできます。

   {
     test: /\.(ttf|eot|woff|woff2|svg)$/,
     use: [
        {
          loader: 'url-loader',
          options: {
            name:'[hash].[ext]' 
            outputPath: 'fonts',
          },
        },
       ],
    }
0
Petros Kyriakou