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在特定的需求情況下“忽略”加載器？

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