Webpack - 忽略require（）中的加载器？

Question

我有一个TypeScript项目，我正在捆绑Webpack。它是我正在编写的开源库的demo / docs应用程序，所以我想在文档中显示一些源代码。

在我的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

Answer 1

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

!!raw!file.ts

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

https://webpack.github.io/docs/loaders.html

Answer 2

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

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

Answer 3

  

是否有正确的方法告诉webpack＆＃34;忽略＆＃34;特定需求案件中的装载机？

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