Webpack 文件加载器不复制文件

Question

在 Angular2 应用程序中，我在 webpack 配置中设置了一个文件加载器，如下所示：

  {
    test: /\.(eot|svg|ttf|woff|woff2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'file?name=/assets/fonts/[name].[ext]'
  }

我在配置的其他地方也有这个：

modulesDirectories: ['node_modules']

据我所知，文件加载器在 node_modules 文件夹中搜索与给定表达式匹配的任何文件（在本例中为字体文件），并将它们复制到 /assets/fonts 文件夹中构建输出。然而，这确实有效，因为实际上没有文件被复制到目标文件夹。我错过了什么？

附带说明一下，我还想知道如何处理冲突，因为 node_modules 中的多个包中可能存在同名文件。

更多信息： vendor.scss 文件包括以下内容： $zmdi-字体路径："assets/fonts"； @import "~material-design-iconic-font/scss/material-design-iconic-font.scss";

sass-loader 最终将其应用于结果如下 css:

@font-face {
font-family: 'Material';
src:url('assets/fonts/Material-Design-Iconic-Font.woff2?v=2.2.0') format('woff2'),url('assets/fonts/Material-Design-Iconic-Font.woff?v=2.2.0') format('woff'),url('assets/fonts/Material-Design-Iconic-Font.ttf?v=2.2.0}') format('truetype');
font-weight: normal;
font-style: normal;
}

以上两个步骤将导致浏览器向 assets/fonts/Material-Design-Iconic-Font.woff2?v=2.2.0 处的字体文件发出请求。这显然要到运行时才会发生。我应该在哪里 require 文件以便在构建时将其复制到 assets/fonts？

我也在管道中使用 sass-loader： { 测试：/.scss$/, 装载机：['raw-loader', 'sass-loader'] }

并像这样在我的组件中包含 sass：

styleUrls: [
'./../assets/scss/main.scss'
]

我可以从浏览器中看到 css 包含在 HTML 中，但调用字体 return 404.

Answer 1

它的工作方式有点不同：

它不会简单地复制与测试正则表达式匹配的所有文件。它将复制与正则表达式匹配的所有必需文件。这意味着在您的代码中的某处，您必须需要一个加载字体的 css 文件（或 sass 或更少）。然后 Webpack 将确保将字体复制到您的资产文件夹中。

注意，可以去掉/assets/fonts/...前面的/。

编辑确保在你的 js 中的应用程序开头的某处需要你的 sass 文件 vendor.scss。

例子

require('./path-to-vendor/vendor.scss');

Webpack 随后将加载文件并为您准备任何依赖项。在 js 中要求 sass 看起来很奇怪，但这就是它的工作原理。 :)

Webpack 文件加载器不复制文件

Webpack file loader does not copy files

webpack

webpack-file-loader

例子