How can I prepend a loader in `.use()` ? about webpack-chain HOT 5 CLOSED

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

from webpack-chain.

There are two way I could see doing this.

The first would be to change your rule to add it in the right order:

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

The second would be a little more low-level if you wanted to modify after the fact. Since JavaScript Maps are iterated in insertion order, you'll need to re-insert the ts-loader. I'm guessing something like this (untested):

const tsRule = chain.module.rule('ts');
const tsLoader = tsRule.use('ts');

tsRule.uses.delete('ts');
tsRule.use('hot').loader('react-hot-loader/webpack');
tsRule.uses.set('ts', tsLoader);

from webpack-chain.

My pleasure!

from webpack-chain.

A better resolution is found in #28, using the .before() chain, to specify before which loader you want to insert. In this case I believe you would resolve it this way:

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

I didn't test the if the order of options/before mattered, but doing .loader().before() worked for me

from webpack-chain.

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

from webpack-chain.