Webpack - 忽略 require(） 中的加载器

Webpack - ignore loaders in require()?

本文关键字：加载 忽略 require Webpack      更新时间：2023-09-26

我有一个 TypeScript 项目，我正在与 Webpack 捆绑在一起。这是我正在编写的开源库的演示/文档应用程序，因此我想将一些源代码作为文档的一部分展示。

在我的 webpack 配置中，我有：

 loaders: [
   { test: /'.ts$/, loader: 'ts'},
   { test: /'.css$/, loader: 'style!raw' },
   { test: /'.html/, loader: 'html' }
 ]

这适用于转译和捆绑我的 TypeScript 文件。在我的一个应用程序组件中，我这样做：

basicCodeT: string = require('./basic-example-cmp.html');
basicCodeC: string = require('!raw!./basic-example-cmp.ts');

将源代码加载到一个字符串中，然后我想在文档中显示该字符串。

如您所见，第二行中有一个前导!，我发现它似乎从配置中"绕过"默认加载器并将原始 TypeScript 加载为字符串。

在我的开发版本中，这是有效的，但是当我使用 UglifyJsPlugin 和 OccurrenceOrderPlugin 进行"生产"构建时，我得到以下输出： 

ERROR in ./demo/src/basic-example-cmp.html
Module build failed: 
@ ./demo/src/demo-app.ts 24:26-61

这与我尝试要求原始 TypeScript 的源中的行相对应。

因此，我想在应用程序构建过程中通过 TS 编译器传递basic-example-cmp.ts，但也希望要求它作为应用程序中的原始文本。

那么我的问题是：有没有一种正确的方法告诉 webpack 在特定需要的情况下"忽略"加载器？

我为!添加前缀的方式是否正确？是黑客吗？

更新

事实证明，我的问题仅仅是由于 Webpack 处理 HTML 模板的方式 - 它不喜欢 Angular 2 模板语法，请参阅：https://github.com/webpack/webpack/issues/992

您可以在 webpack 配置文件中添加两个感叹号来忽略加载器

!!raw!file.ts

一个感叹号只会禁用预加载器！

https://webpack.js.org/concepts/loaders/#inline

据我所知，这是您能够以两种不同方式加载文件的唯一方法。我希望问题是您的生产版本中的路径不同。

我建议使用 --display-error-details 标志运行 webpack，以获取有关失败原因的更多信息。

有没有一种正确的方法告诉 webpack 在特定需求情况下"忽略"加载器？

是的。根据需要更新{ test: /'.ts$/, loader: 'ts'},中的test。

相关文章：