Webpack url-loader设置目标路径

Question

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

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

它将文件输出到文件系统中, 但是我找不到设置目标路径的方法。

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

- user3900456

Answer 1

url-loader是基于file-loader构建的，因此您可以像使用file-loader一样使用它，如下所示：

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

- wandergis

Answer 2

你可以这样书写

{
        test: /\.(png|woff|eot|ttf|svg|gif)$/,
        use: [
          {
          loader: 'url-loader',
          options: {
            limit: 10000, // 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
          }
        }]
      }

- Johansrk

---

“1000”不是1KB而是10KB吗？只是说一下。 - marverix

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

- David Glass

Answer 4

你也可以这样做，这样会更简洁

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

- Petros Kyriakou