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目录中）创建的。如何配置以便在mysite / app目录中输出那些woff和ttf？

Answer 1

我最近想在webpack v1中使用字体真棒，我已经安装了npm模块In [83]: df['col_2'] = pd.cut(df.col_1 , [0 , 4 , 10 , np.inf] , labels = ['<=4' , '(4,10]' , '>10'] ) df Out[83]: col_1 col_2 0 3 <=4 1 15 >10 2 8 (4,10]而不是font-awesome

您必须先安装少量装载机：

font-awesome-webpack

并在webpack.config.js中添加使用它们：

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

现在，如果您加入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

您通常可以在模板中使用font-awesome：

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

这个要点帮助了我：https://gist.github.com/Turbo87/e8e941e68308d3b40ef6

Answer 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以外的任何内容时，我建议使用此方法。希望这可以帮助。

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

Answer 4

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

这个架构帮助我

Answer 5

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

replaceCurrentItemWithPlayerItem

所以，我必须将'＆amp; name./javascripts/ [hash]。[ext]'添加到所有字体文件中，如：

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

Answer 6

就像说明一样，我使用font-awesome-loader遇到了类似的错误。无论上述任何更改如何，目录都不会设置正确。

要更正此问题，可以将选项publicPath添加到输出：

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

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

希望这有帮助。

Answer 7

I had font-awesome-webpack working on my PC, but it wouldn't work on my Mac. I think my PC was still throwing the 404s for the .woff2, .woff, and .tiff, but the icons displayed properly, so I ignored the problem.

My Mac, however, would not display the icons. While reading this Q&A, I tried a bunch of things. Here's what lead to my solution:

On my 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的{{1}}参数。我删除了前导./[hash].[ext]，现在没有404（浏览器正确地从站点的根目录请求文件）：

结论：如果您的入口点不在您的Web根目录，并且您能够访问Web根目录中的字体文件，则可能只需要使用此名称配置来修复路径。

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"
}

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

8 个答案: