Webpack：加载标志性字体

Question

我已经安装了font-awesome:

npm install font-awesome

我在 webconfig 中添加了这些规则：

{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }

在我的main.scss 中，我添加了这个导入：

@import "font-awesome/scss/font-awesome.scss";

font-awesome css 规则已加载到浏览器中，但未加载字体。

似乎_localhost/fonts/fontawesome-webfont.woff2?v=4.7.0 上的浏览​​器请求了字体。但是，响应是主 html 页面：

我认为这个问题与字体有关，进入nodo_modules/font-awesome/fonts/。我认为这些文件无法访问，因为它们没有被 webpack“移动”到可访问的地方......那么，在 webpack 结束“捆绑过程”后它们位于哪里？

编辑

我已将测试更改为：

{ test: /\.(ttf|eot|otf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }

但是，当浏览器尝试加载字体时，响应仍然是 html：

编辑 2

我刚刚意识到在我的tsconfig.json 文件中包含以下内容：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["dom", "es6", "es2015", "es2016", "es2017"],
    "noEmitHelpers": true,
    "importHelpers": true,
    "skipDefaultLibCheck": true,
    "pretty": true,
    "sourceMap": true,
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "exclude": [
    "node_modules",  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
    "compiled",
    "src/main.browser.aot.ts",
    "e2e/**/*.ts"
  ],
  "awesomeTypescriptLoaderOptions": {
    "useWebpackText": true,
    "forkChecker": true,
    "useCache": true
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": { "rewriteTsconfig": false }
}

有事吗？

Answer 1

我不能 100% 确定这是准确的，因为我无法安装 your repo - 我遇到了一些奇怪的、不正确的依赖错误。但我认为问题是：

您的正则表达式未捕获 FontAwesome.otf 文件。

这个测试现在应该可以工作了..

{ test: /\.(ttf|eot|otf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }