Webpack 网页包：加载图标字体

我已经安装了

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规则已加载到浏览器中，但未加载字体

似乎是浏览器在

\u localhost/fonts/fontsawesome webfont.woff2？v=4.7.0

上请求字体。但是，响应是主html页面：

---

我认为问题与字体进入

nodo\u模块/font-awesome/font/

有关。我认为这些文件无法访问，因为它们没有通过网页“移动”到可访问的位置。。。那么，在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 }
}

{
“编译器选项”：{
“目标”：“es5”，
“模块”：“commonjs”，
“moduleResolution”：“节点”，
“emit decoromentadata”：正确，
“实验生态学者”：没错，
“lib”：[“dom”、“es6”、“es2015”、“es2016”、“es2017”]，
“noEmitHelpers”：没错，
“进口者”：没错，
“skipDefaultLibCheck”：true，
“漂亮”：没错，
“源地图”：正确，
“类型根”：[
“节点\模块/@类型”
]
},
“排除”：[
“node_modules”我不能100%确定这是否准确，因为我无法安装-我遇到了一些奇怪的、不正确的依赖项错误。但我认为问题是：

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


这个测试现在应该可以了

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

我也有同样的问题，但我最终将字体分离并将其包含在HTML文件中。：（我认为问题与字体进入
nodo\u模块/font-awesome/font/
有关。我认为这些文件无法访问，因为它们没有“移动”通过网页进入一个可访问的地方…听起来很有希望！你尝试过什么吗？我在
url加载器上添加了一个问题，我刚刚编辑了我的代码。遗憾的是，它似乎还没有成功…我编辑了帖子。这真的非常奇怪！@Jordi让我们看看这是网页包/捆绑错误还是其他什么。请创建一个小starter项目-在该项目中，您单独使用font awesome。只是为了查看它的行为。然后，如果它工作正常，请将加载的文件与上面图片中的文件进行比较。如果加载了相同的文件，则意味着webpack在移动文件时对内容做了一些操作。其目的是越来越多地隔离问题，并且确保其他看起来不相关的变量不起作用。这样做并不有趣，但我认为在这一点上是一个足够好的方法。