在Angular2应用程序，我在的WebPack配置文件加载设置，就像这样：的WebPack文件加载不复制文件

modulesDirectories: ['node_modules']

：

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

我也是在配置有此别处

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

在附注中，我也想知道冲突是如何处理的，因为可能存在多个具有相同名称的包中的node_modules文件。

更多信息： vendor.scss文件包含以下内容： $ zmdi-font-path：“assets/fonts”; @import“〜material-design-iconic-font/scss/material-design-iconic-font.scss”;

的青菜装载机最终应用于这导致以下的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在管道： { 测试：/.scss$/，装载机：[ '原始装载机'， 'SASS装载机'] }

，并包括上海社会科学院在我的部分是这样的：

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

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

来源

2016-08-24 ruk

它工作方式有点不同：

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

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

编辑确保要在您的应用程序的开始处的某个位置存放您的sass文件vendor.scss。

例

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

然后会的WebPack加载该文件，并为您准备的依赖。它看起来很奇怪，需要你在JS里面的sass，但这就是它的工作原理。 :)

来源

2016-08-24 15:09:42

谢谢。在上面的问题中添加了更多信息。我将删除资产的主要斜线。 – ruk

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

您可以详细说明@evolutionxbox –

的WebPack文件加载不复制文件

回答

例

相关问题