Webpack - 如何在 require() 中忽略加载器？

Question

我有一个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原始文件的行。

因此，我想将basic-example-cmp.ts作为应用程序构建的一部分通过TS编译器，但同时也希望将其作为纯文本在应用程序中进行引用。

那么我的问题是：有没有一种正确的方法告诉webpack在特定的require情况下“忽略”加载程序？

我在前面添加!的方式是否正确？这是一个hack吗？

更新

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

- Michael Bromley

Answer 1

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

!!raw!file.ts

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

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

- Kevin Simper

---

这正是我在寻找的答案，非常感谢。我仍然觉得 Webpack 的文档很难浏览。 - Michael Bromley

Webpack 非常可以配置 :P - Kevin Simper

Answer 2

据我所知，这是您能够以两种不同的方式加载文件的唯一方法。我认为问题可能在于您的生产构建中路径不同。建议您使用--display-error-details标志运行webpack，以获取更多有关失败原因的信息。

- David Bradshaw

---

好的，那么也许问题是其他方面引起的，正如你所建议的那样 - 我会启用该标志并查找更多信息。谢谢。 - Michael Bromley

Answer 3

有没有一种适当的方法告诉webpack在特定的require情况下“忽略”加载器？

是的。根据需要更新您的test，例如：{ test: /\.ts$/, loader: 'ts'}。

- basarat

---

嗨，我应该澄清一下，我确实希望将 basic-example-cmp.ts 作为我的应用程序的一部分进行转译，但是我还希望在同一个应用程序中将其作为字符串加载，这次不进行转译。我会更新问题以使其更清晰明了。 - Michael Bromley