javascript 如何在 webpack 中从 font-awesome-webpack 配置字体文件输出目录？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34014151/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to configure font file output directory from font-awesome-webpack in webpack?
提问by Rolando
I just installed font-awesome-webpack. I import it using: require("font-awesome-webpack");
我刚刚安装了 font-awesome-webpack。我使用以下方法导入它：require("font-awesome-webpack");
My webpack config includes the following in my module loaders array:
我的 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" }
Problem is I am getting this error in developer console:
问题是我在开发人员控制台中收到此错误：
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)
The problem is, those files are created at the root (within the mysite directory). How do I configure such that those woffs and ttf are output within the mysite/app directory?
问题是，这些文件是在根目录（在 mysite 目录中）创建的。如何配置这些 woffs 和 ttf 在 mysite/app 目录中输出？
回答by Vincent Taing
I've recently wanted to use font awesome with webpack v1, I've installed the npm module font-awesomenot font-awesome-webpack
我最近想在 webpack v1 中使用很棒的字体，我已经安装了 npm 模块font-awesome而不是font-awesome-webpack
You must install few loaders before :
您必须先安装几个加载程序：
npm i css-loader file-loader style-loader url-loader
npm i css-loader file-loader style-loader url-loader
and add use them in your webpack.config.js :
并在你的 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"
}]
}
Now if you include in your entry.js:
现在，如果您包含在您的entry.js：
require('font-awesome/css/font-awesome.css');
require('font-awesome/css/font-awesome.css');
You normally be able to use font-awesome in your template :
您通常可以在模板中使用 font-awesome ：
<i class="fa fa-times"></i>
<i class="fa fa-times"></i>
This gist helped me : https://gist.github.com/Turbo87/e8e941e68308d3b40ef6
这个要点帮助了我：https: //gist.github.com/Turbo87/e8e941e68308d3b40ef6
回答by Paul
As of Feb. 2016 this seems to be a common question with webpack, so I hope this provides some help. If you add this to the loader: '&name=./path/[hash].[ext]', that specifies where to look for those files. For example:
截至 2016 年 2 月，这似乎是 webpack 的常见问题，所以我希望这能提供一些帮助。如果将此添加到 loader: '&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]'
}
This places the correct URL to the fonts within the generated CSS file.
这会将正确的 URL 放置在生成的 CSS 文件中的字体中。
I recommend this method when dealing with anything other than css/scss. Hope this helps.
在处理 css/scss 以外的任何东西时，我推荐这种方法。希望这可以帮助。
回答by user2738707
In addition to the above answers, I I had to specify a path in output to get it working like so to specify the hosted location and not write the assets to the root path:
除了上述答案之外，II 还必须在输出中指定一个路径才能使其工作，以指定托管位置而不是将资产写入根路径：
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
回答by tonghae
{
test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=100000'
}
This schema helped me
这个模式帮助了我
回答by Shaun Ripley
Just as a note, I came across a similar fault using the font-awesome-loader. Where the directory would not be set correct, regardless of any of the changes above.
作为说明，我在使用 font-awesome-loader 时遇到了类似的错误。无论上述任何更改如何，都不会正确设置目录。
To correct this, the option publicPath can be added to output:
为了解决这个问题，可以将选项 publicPath 添加到输出中：
output: { path: config.outputPath, filename: '[name].js', publicPath: '/assets/' },
The folder /assets/ will be changed to wherever you actually store your fonts.
文件夹 /assets/ 将更改为您实际存储字体的位置。
Hopefully this helps.
希望这会有所帮助。
回答by jadeydi
This is my case, because of my script path is like below:
这是我的情况，因为我的脚本路径如下所示：
script(src='/javascripts/app.js')
So, I have to add '&name./javascripts/[hash].[ext]' to all font files like:
因此，我必须将 '&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]"
}
回答by Michael Lewis
I had font-awesome-webpackworking 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.
我曾font-awesome-webpack在我的 PC 上工作，但它在我的 Mac 上不起作用。我认为我的电脑仍然为 .woff2、.woff 和 .tiff 抛出 404，但图标显示正确，所以我忽略了这个问题。
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:
但是，我的 Mac 不会显示图标。在阅读这个问答时，我尝试了很多东西。这是导致我的解决方案的原因：
- On my http://localhost:8080/View/page, I was getting 404s that looked like the link below:
- I entered http://localhost:8080/View/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2into the browser, and confirmed the 404.
- I tried going to http://localhost:8080/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2(removing the extra path before the font file), and was able to access the file.
- I modified Paul's answer to remove the
.that made the file request relative.
- 在我的http://localhost:8080/View/页面上，我收到 404，看起来像下面的链接：
- 我在浏览器中输入http://localhost:8080/View/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2，确认404。
- 我尝试访问http://localhost:8080/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2（删除字体文件之前的额外路径），并且能够访问该文件。
- 我修改了 Paul 的答案以删除
.使文件请求相对的 。
For example, Paul suggested:
例如，保罗建议：
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&minetype=application/font-woff&name=./[hash].[ext]'
}
Take note of the &nameparameter, that uses ./[hash].[ext]. I dropped the leading .and now there are no 404s (the browser correctly requests the files from the root of the site):
记下&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]'
}
Conclusion: If your entry point is NOT at your web root, and you're able to access the font files at the web root, you probably just need to use this name configuration to fix the path.
结论：如果您的入口点不在您的 web 根目录，并且您能够访问 web 根目录中的字体文件，您可能只需要使用此名称配置来修复路径。
回答by John Samuel
Same issue faced.
面临同样的问题。
Fixed it using the below syntax,
使用以下语法修复它，
loader: "file?name=./fonts/[hash].[ext]"
fonts is the directory name, replace it with your own directory name.
fonts 是目录名，替换成你自己的目录名。
Example:
例子：
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url?name=/build/[hash].[ext]&limit=8192&mimetype=application/font-woff"
}
