如何从webpack中的font-awesome-webpack配置字体文件输出目录？ [英] How to configure font file output directory from font-awesome-webpack in webpack?

问题描述

我刚安装了font-awesome-webpack。我使用以下方法导入它： require（font-awesome-webpack）;

I just installed font-awesome-webpack. I import it using: require("font-awesome-webpack");

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

My webpack config includes the following in my module loaders array:

    { 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)

问题是，这些文件是在根目录（在mysite目录中）创建的。如何配置以便在mysite / app目录中输出那些woff和ttf？

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?

推荐答案

我最近想要使用webpack v1的字体真棒，我已经安装了npm模块 font-awesome 而不是 font-awesome-webpack

I've recently wanted to use font awesome with webpack v1, I've installed the npm module font-awesome not font-awesome-webpack

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

You must install few loaders before :

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

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

and add use them in your 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 中：

Now if you include in your entry.js :

require（'font-awesome / css / font-awesome.css'）;

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

You normally be able to use font-awesome in your template :

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

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

这篇关于如何从webpack中的font-awesome-webpack配置字体文件输出目录？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！