首页 文章

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

提问于
浏览 次
4

在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 文件，以便在构建时将其复制到资产/字体？

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

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

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

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

webpack webpack-file-loader

1 回答

  • 5

    它的工作方式略有不同：

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

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

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

    示例

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

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

    回复于

相关问题