如何在webpack中使用font-awesome-webpack配置字体文件输出目录？

Question

我刚刚安装了font-awesome-webpack插件，并使用以下方式导入：require("font-awesome-webpack");

我的webpack配置文件在模块加载器数组中包含以下内容：

    { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
    { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }

问题是我在开发者控制台中遇到了这个错误：

localhost/:1 GET http://localhost/mysite/app/db812d8a70a4e88e888744c1c9a27e89.woff2 
localhost/:1 GET http://localhost/mysite/app/a35720c2fed2c7f043bc7e4ffb45e073.woff 
localhost/:1 GET http://localhost/mysite/app/a3de2170e4e9df77161ea5d3f31b2668.ttf 404 (Not Found)

问题在于，这些文件是在根目录下创建的（在mysite目录中）。我如何配置使得这些woff和ttf文件输出到mysite/app目录中？

- Rolando

---

有人吗？这不是使用webpack的方式吗？ - Rolando

我是否错误地使用了font-awesome/webpack？ - Rolando

Answer 1

最近我想在webpack v1中使用Font Awesome，我已经安装了npm模块font-awesome而不是font-awesome-webpack

在此之前你需要安装几个加载器:

npm i css-loader file-loader style-loader url-loader

并在你的webpack.config.js中使用它们：

module: {
    loaders: [{
      test: /\.css$/,
      loader: 'style!css?sourceMap'
    }, {
      test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/font-woff"
    }, {
      test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/font-woff"
    }, {
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/octet-stream"
    }, {
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
      loader: "file"
    }, {
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=image/svg+xml"
    }]
  }

如果你在 entry.js 中加入以下代码：

require('font-awesome/css/font-awesome.css');

一般情况下，你可以在模板中使用 font-awesome：

<i class="fa fa-times"></i>

这个代码片段对我非常有帮助：https://gist.github.com/Turbo87/e8e941e68308d3b40ef6

- Vincent Taing

---

那么，fontawesome-webpack只是有问题还是什么？ - Rolando

这就是它。 - zilj

请注意，您还需要在您的webpack.config.js文件中的output中设置publicPath，否则字体 URL 将相对于您的应用程序路径，并返回 404 错误。 - Wilfred Hughes

@Plastic 到 output 路径 - Rune Antonsen

重大变更：在使用加载器时不再允许省略“-loader”后缀。您需要指定“css-loader”而不是“css”，请参见https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed。这适用于新的webpack。 - jmq

Answer 2

截至2016年2月，这似乎是关于webpack的一个常见问题，所以我希望这能提供一些帮助。如果你把'&name=./path/[hash].[ext]'添加到loader中，那就指定了在哪里查找这些文件。例如：

{
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=10000&mimetype=application/font-woff&name=./[hash].[ext]'
}

这会在生成的CSS文件中放置正确的字体URL。

除了css/scss之外的任何内容，我建议使用这种方法。希望这可以帮到你。

- Paul

---

这对我很有帮助！谢谢！ - Oak

这是我在使用webpack 2.x时唯一有效的解决方案。 - Plastic

Answer 3

除了以上的答案，我还需要在输出中指定路径才能使其正常工作，例如指定托管位置而不将资源写入根路径：

output: {
     filename: "./bundle.js",
     path: “./client”
},
module: {
       loaders[
          {
              test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
              loader: "url?limit=10000&mimetype=application/font-woff&name=./webpack-assets/[name]/[hash].[ext]"
            }, {
              test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
              loader: "url?limit=10000&mimetype=application/font-woff&name=./webpack-assets/[name]/[hash].[ext]"
            }, {
              test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
              loader: "url?limit=10000&mimetype=application/octet-stream&name=./webpack-assets/[name]/[hash].[ext]"
            }, {
              test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
              loader: "file?&name=./webpack-assets/[name]/[hash].[ext]"
            }, {
              test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
              loader: "url?limit=10000&mimetype=image/svg+xml&name=./webpack-assets/[name]/[hash].[ext]"
            }   
  ]  // loaders
} // module 

- user2738707

Answer 4

{
    test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'url-loader?limit=100000'
}

这个模式对我很有帮助

- tonghae

---

为什么在PNG图片中使用URL-loader？ - Design by Adrian

Answer 5

这是我的情况，因为我的脚本路径如下：

    script(src='/javascripts/app.js')

所以，我需要将“&name./javascripts/[hash].[ext]”添加到所有字体文件中，例如：

{
  test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
  loader: "url?limit=10000&mimetype=application/font-woff&name=./javascripts/[hash].[ext]"
}, {
  test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
  loader: "url?limit=10000&mimetype=application/font-woff&name=./javascripts/[hash].[ext]"
}, {
  test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
  loader: "url?limit=10000&mimetype=application/octet-stream&name=./javascripts/[hash].[ext]"
}, {
  test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
  loader: "file?name=./javascripts/[hash].[ext]"
}, {
  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  loader: "url?limit=10000&mimetype=image/svg+xml&name=./javascripts/[hash].[ext]"
}

- jadeydi

Answer 6

仅作为一条注释，我使用 font-awesome-loader 时遇到了类似的错误。无论上面的任何更改，目录都不会设置正确。

要纠正这个问题，可以在输出中添加选项 publicPath：

output: { path: config.outputPath, filename: '[name].js', publicPath: '/assets/' },

"

/assets/

文件夹将被更改为实际存储字体的位置。

希望这可以帮到你。

"

- Shaun Ripley

Answer 7

我在电脑上安装了 font-awesome-webpack，但是在我的 Mac 上无法工作。我认为我的电脑仍然会返回 .woff2、.woff 和 .tiff 的 404 错误，但图标显示正常，所以我忽略了这个问题。

然而，在我的 Mac 上，它无法正确显示图标。在阅读此问答时，我尝试了很多方法。以下是导致我解决问题的步骤：

1. 在我的http://localhost:8080/View/页面上，我遇到了以下类似的404错误：
2. 我在浏览器中输入http://localhost:8080/View/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2，并确认了404错误。
3. 我尝试访问http://localhost:8080/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2（删除字体文件前面的额外路径），并成功访问了该文件。
4. 我修改了Paul的答案，去掉了使文件请求变成相对路径的.。

例如，Paul建议：

{
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=10000&minetype=application/font-woff&name=./[hash].[ext]'
}

请注意&name参数，它使用./[hash].[ext]。我去掉了前面的.，现在没有404错误了（浏览器从站点根目录正确请求文件）。

{
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=10000&minetype=application/font-woff&name=/[hash].[ext]'
}

结论：如果你的入口点并非在网站根目录下，并且你能够在网站根目录下访问字体文件，那么你可能只需要使用这个名字配置来修复路径问题。

- Michael Lewis

Answer 8

遇到了同样的问题。

使用以下语法进行修复，

loader: "file?name=./fonts/[hash].[ext]"

fonts是目录名称，请将其替换为您自己的目录名称。

示例：

{ 
  test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
  loader: "url?name=/build/[hash].[ext]&limit=8192&mimetype=application/font-woff"
}

- Johnson Samuel