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/。我认为这些文件无法访问，因为它们没有被移动＆＃34;通过webpack到达一个可到达的地方......那么，它们位于webpack结束后的位置＆＃34;捆绑流程＆＃34;？

修改

我改变了我的测试：

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