Webpack-在require()中忽略加载程序吗? [英] Webpack - ignore loaders in require()?

问题描述

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

I have a TypeScript project which I am bundling with Webpack. It is a demo/docs app for an open source lib I am writing, so I want to show some of the source code as part of the docs.

在我的webpack配置中，我有:

In my webpack config I have:

 loaders: [
   { test: /\.ts$/, loader: 'ts'},
   { test: /\.css$/, loader: 'style!raw' },
   { test: /\.html/, loader: 'html' }
 ]

对于转译和捆绑我的TypeScript文件效果很好.在我的一个应用程序组件中，我这样做:

which works fine for transpiling and bundling my TypeScript files. In one of my app components I do this:

basicCodeT: string = require('./basic-example-cmp.html');
basicCodeC: string = require('!raw!./basic-example-cmp.ts');

将源代码加载到一个字符串中，然后我想在文档中显示该字符串.

to load the source code into a string which I then want to display in the docs.

如您所见，第二行中有一个前导！，我发现这似乎从配置中绕过"了默认的加载器，并将原始TypeScript加载为字符串.

As you can see, there is a leading ! in the second line which I discovered seems to "bypass" the default loaders from the config and loads the raw TypeScript as a string.

在我的开发版本中，此方法有效，但是当我使用UglifyJsPlugin和OccurrenceOrderPlugin进行生产"版本时，将得到以下输出:

In my dev build this works, but when I do a "production" build with the UglifyJsPlugin and OccurrenceOrderPlugin, I get the following output:

ERROR in ./demo/src/basic-example-cmp.html
Module build failed: 
@ ./demo/src/demo-app.ts 24:26-61

与源中我尝试使用原始TypeScript的行相对应.

which corresponds to the line in the source where I try to require the raw TypeScript.

因此，我想将 basic-example-cmp.ts 作为应用程序构建的一部分通过TS编译器传递，但也希望有此要求作为应用中的原始文本.

So, I want to pass basic-example-cmp.ts through the TS compiler as part of the app build, but also want to require it as raw text in the app.

然后我的问题是:在特定的需求情况下，是否有一种适当的方法告诉webpack忽略"加载程序?

我加！的方式正确吗?是黑客吗?

Is my way of prepending a ! correct? Is it a hack?

发现我的问题仅仅是由于Webpack处理HTML模板的方式-它不喜欢Angular 2模板语法，请参见:

Turns out my problem is simply due to the way Webpack handles HTML templates - it does not like the Angular 2 template syntax, see: https://github.com/webpack/webpack/issues/992

推荐答案

您可以在Webpack配置文件中添加两个惊叹号以忽略加载程序

You can add two exclamation to ignore loaders in the webpack config file

!! raw！file.ts

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

one exclamation will only disable preloaders!

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

这篇关于Webpack-在require()中忽略加载程序吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！