Webpack - ignore loaders in require()?

Question

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.

In my webpack config I have:

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

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.

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.

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

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

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.

My question then is: Is there a proper way to tell webpack to "ignore" loaders in specific require cases?

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

Update

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

score 10 · Accepted Answer · edited Sep 25 '19 at 21:35

10

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

edited Sep 25 '19 at 21:35

Izhaki

23,372
9
69
107

answered Mar 05 '16 at 21:27

Kevin Simper

1,669
19
32

Exactly the answer I was looking for, thanks. I still find the Webpack docs very difficult to navigate. – Michael Bromley Mar 07 '16 at 09:10
1

Webpack is soo configable :P – Kevin Simper Mar 13 '16 at 02:58

score 2 · Answer 2 · answered Feb 23 '16 at 23:07

2

As far as I know that is the only way you are going to be able to load a file in two different ways. I expect the issue is that your paths are different in your production build.

I would suggest running webpack with the --display-error-details flag to get more info on why it fails.

answered Feb 23 '16 at 23:07

David Bradshaw

11,859
3
41
70

1

Thanks. Okay, then perhaps the issue is something else as you suggest - I will see what I can find out with that flag enabled. – Michael Bromley Feb 24 '16 at 10:39

score -1 · Answer 3 · answered Feb 22 '16 at 22:23

-1

Is there a proper way to tell webpack to "ignore" loaders in specific require cases?

Yes. Update your test in { test: /\.ts$/, loader: 'ts'}, as desired.

answered Feb 22 '16 at 22:23

basarat

261,912
58
460
511

2

Hi, I should clarify that I *do* want to transpile `basic-example-cmp.ts` as part of my app, but I *also* want to load it as a string in that same app, this time not transpiled. I'll update the question to make that clear. – Michael Bromley Feb 23 '16 at 08:44

Webpack - ignore loaders in require()?

Update

3 Answers3

Linked