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

Answer 1

我最近想用字体真棒用的WebPack V1,我已经安装了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

Answer 2

截至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]'
}

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

在处理css/scss以外的任何内容时,我建议使用此方法.希望这可以帮助.