Webpack url-loader 设置目标路径

Question

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

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

它将大于 50k 的文件输出到文件系统，但我找不到如何设置目标路径。

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

Answer 1

url-loader是建立在file-loader的基础上的，所以你可以像file-loader一样使用它，如下图：

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

Answer 2

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

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

Answer 3

可以这样写

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

Answer 4

你也可以这样做，可以更干净

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

Webpack url-loader 设置目标路径

Webpack url-loader set destination path

urlloader

webpack