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"~special-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文件在哪里,以便在构建时将其复制到资产/字体？

我也在sass-loader管道中使用:{test:/.scss$/,loaders:['raw-loader','sass-loader']}

并在我的组件中包含sass,如下所示:

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

我可以看到,从浏览器中看到css包含在HTML中,但是对字体的调用返回404.

Answer 1

它的工作方式略有不同:

它不会简单地复制与测试正则表达式匹配的所有文件.它将复制与正则表达式匹配的所有必需文件.这意味着在代码中的某个地方,您必须要求加载字体的css文件(或sass或更少).然后,Webpack将确保将字体复制到您的assets文件夹.

注意,你可以/放在前面/assets/fonts/....

编辑 确保vendor.scss在你的应用程序开头的某个地方需要你的sass文件.

例

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

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