question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How can I prepend a loader in `.use()` ?

See original GitHub issue

Hi,

I try to integrate webpack-chain in my project but it seems I can’t do something.

Let’s say I have a TypeScript loader :

chain.module.rule('ts')
    .test(/\.tsx?$/)
    .exclude.add(/(node_modules|bower_components)/).end()
    .use("ts").loader("ts-loader").options(typeScriptConfigurator())

The thing is, now I wish to use React Hot Loader which requires me to add a loader before the “ts-loader” (Because it has to be executed after ts-loader)

Is there some way to do something like ?

chain.module.rule('ts').prependUse("hot").loader("react-hot-loader/webpack")

Thanks in advance.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
onigoetzcommented, Mar 10, 2017

Wow, that’s a quick answer.

I couldn’t do the first one as this configuration is placed in a completely different place. I will try with with the second one.

Thanks

0reactions
onigoetzcommented, Jul 28, 2018

True, this looks easier, anyway react-hot-loader is not a loader anymore so I don’t use this anymore 😃 But I use webpack-chain a lot in my projects, so this can come in handy

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to prepend rule loaders? #28 - neutrinojs/webpack-chain
Loaders on rules are order dependent, yet, looking at the source code for webpack-chain, it's being treated as a map (rule.uses).
Read more >
Using webpack-merge to prepend loaders to a rules `use` array
So I tried to use merge.smartStrategy({ 'module.rules.use': 'prepend' })() , but I get an error: TypeError: this[MODULE_TYPE] ...
Read more >
webpack-loader-append-prepend - npm
Start using webpack-loader-append-prepend in your project by running `npm i webpack-loader-append-prepend`. There are 3 other projects in ...
Read more >
How To Create A Custom Preloading Screen | CSS3 Tutorial
1. Add HTML and CSS for loading overlay · 2. Add and style our default content · 3. Add preloader transition · 4....
Read more >
style-loader - webpack
By default, the style-loader appends <style> / <link> elements to the end of the style target, which is the <head> tag of the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found