实施例

Question

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

.item { display: inline-block; }

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

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

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

另一方面，我也想知道如何处理冲突，因为/assets/fonts中的文件可能存在于同一个名称的多个包中。

更多信息： node_modules文件包括以下内容： $ zmdi-font-path：＆＃34; assets / fonts＆＃34 ;; @import＆＃34; ~special-design-iconic-font / scss / material-design-iconic-font.scss＆＃34 ;;

sass-loader最终将其应用于以下css：

vendor.scss

上述两个步骤将导致浏览器向@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： { 测试：/。scss $ /，装载机：[＆＃39; raw-loader＆＃39;，＆＃39; sass-loader＆＃39;] }

并在我的组件中包含sass，如下所示：

sass-loader

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

Answer 1

它的工作方式略有不同：

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

注意，您可以将/放在/assets/fonts/...前面。

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

实施例

require('./path-to-vendor/vendor.scss');
然后，Webpack将加载该文件并为您准备任何依赖项。在js中要求你的sass看起来很奇怪，但这就是它的工作原理。：）

Webpack文件加载器不会复制文件

1 个答案:

实施例