Question

我正在使用webpack的url-loader插件并将其配置为：

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

输出文件＆gt; 50k到文件系统，但我找不到如何设置目标路径。

在这种情况下，我希望将文件存储到./fonts而不是根目录。

Answer 1

url-loader是在文件加载器上构建的，所以你可以像文件加载器一样使用它，如下所示：

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

Answer 2

你可以像这样写

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

Answer 3

要通过@wandergis添加答案，url-loader将在超出大小限制时重命名该图像，并使用哈希作为名称。按照建议使用[name].[ext]时，使用文件的原始名称，这不是我需要的。我需要url-loader将要创建的哈希的名称。因此，您可以添加[hash].[ext]以获取重命名的文件。

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

Answer 4

您也可以这样做，这样可以更清洁

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

Webpack url-loader设置目标路径

4 个答案: