Webpack url-loader设置目标路径

Question

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

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

它将文件> 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]"
}