我有一个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