当前位置:  开发笔记 > 前端 > 正文

Webpack url-loader设置目标路径

如何解决《Webpackurl-loader设置目标路径》经验,为你挑选了3个好方法。

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

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

它将文件> 50k输出到文件系统,但我找不到如何设置目标路径.

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



1> 小智..:

url-loader是在文件加载器上构建的,因此您可以像文件加载器一样使用它,如下所示:

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



2> Johansrk..:

你可以这样写

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



3> David Glass..:

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

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

推荐阅读
贾志军
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有