javascript - Webpack - 忽略 require() 中的加载器？

Question

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

在我的 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.js.org/concepts/loaders/#inline