如何从 webpack 中的 font-awesome-webpack 配置字体文件输出目录？答案

【问题标题】：How to configure font file output directory from font-awesome-webpack in webpack?如何从 webpack 中的 font-awesome-webpack 配置字体文件输出目录？
【发布时间】：2016-03-05 00:09:38
【问题描述】：

我刚刚安装了 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 目录中）创建的。如何配置这些 woffs 和 ttf 在 mysite/app 目录中输出？

【问题讨论】：

有人吗？这不就是使用 webpack 的方式吗？
我是否以错误的方式使用 font-awesome/webpack？

标签： javascript font-awesome webpack

【解决方案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

【讨论】：

那么 fontawesome-webpack 只是有问题还是什么？
这是一个
请注意，您还需要在您的output 中设置publicPath webpack.config.js 文件，否则字体 URL 将与您的应用程序路径相关，并且他们会 404。
@Plastic 致output path
重大更改：不再允许在使用加载程序时省略“-loader”后缀。您需要指定“css-loader”而不是“css”，请参阅webpack.js.org/guides/migrating/…。这是为新的 webpack 准备的。

【解决方案2】：

截至 2016 年 2 月，这似乎是 webpack 的一个常见问题，所以我希望这能提供一些帮助。如果将其添加到加载程序：'&name=./path/[hash].[ext]'，则指定在哪里查找这些文件。例如：

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

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

在处理除 css/scss 以外的任何内容时，我推荐使用此方法。希望这可以帮助。

【讨论】：

这对我有帮助！谢谢！
这是唯一适用于 webpack 2.x 的解决方案

【解决方案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

【讨论】：

【解决方案4】：

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

这个架构帮助了我

【讨论】：

为什么对 PNG 使用 URL-loader？

【解决方案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]"
}

【讨论】：

【解决方案6】：

请注意，我在使用 font-awesome-loader 时遇到了类似的错误。无论上述任何更改，目录都不会正确设置。

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

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

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

希望这会有所帮助。

【讨论】：

【解决方案7】：

我有 font-awesome-webpack 在我的 PC 上工作，但它不能在我的 Mac 上工作。我认为我的 PC 仍在为 .woff2、.woff 和 .tiff 抛出 404，但图标显示正常，所以我忽略了这个问题。

但是，我的 Mac 不会显示这些图标。在阅读此问答时，我尝试了很多事情。以下是导致我的解决方案的原因：

在我的http://localhost:8080/View/ 页面上，我收到了类似于以下链接的 404：
我在浏览器中输入http://localhost:8080/View/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2，确认404。
我尝试转到http://localhost:8080/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2（删除字体文件之前的额外路径），并且能够访问该文件。
我修改了 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]'
}

结论：如果你的入口点不在你的 web 根目录，并且你可以在 web 根目录访问字体文件，你可能只需要使用这个名称配置来修复路径。

【讨论】：

【解决方案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"
}

【讨论】：