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-font-path: "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： { test: /.scss$/, loaders: ['raw-loader', 'sass-loader'] }

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

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

我可以看到从浏览器中访问时，HTML包含了CSS，但字体调用返回404。

- ruk

Answer 1

它的工作方式有点不同：

它不仅仅是复制所有匹配测试正则表达式的文件，而是复制所有必要的匹配正则表达式的文件。这意味着在您的代码中的某个地方，您必须要求加载字体的css文件（或sass或less）。Webpack将确保将字体复制到您的资产文件夹中。

请注意，您可以在/assets/fonts/...前面省略/。

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

示例

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

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

- Mario Tacke

---

谢谢。我在上面的问题中添加了更多信息。我将删除资产前面的斜杠。 - ruk

如果您没有JS应用程序文件怎么办？ - evolutionxbox

能否详细说明一下 @evolutionxbox？ - Mario Tacke

我正在使用webpack构建我的JS，但是JS并不控制资产加载、路由等。 - evolutionxbox