How to run child compilation with different target

[braska]

My main compilation targeted to browser. But I would like to have plugin that compiles and executes JS in node (actually I am trying to fix HtmlWebpackPlugin). So I need to configure child compilation to be targeted to node. How I can do that?

I found NodeTargetPlugin but it do only half of configuration - it switches target, but it do nothing with resolve configuration.

What I mean by "do nothing with resolve configuration"... Let me provide expmple: I am trying to import styled-components in file which I am compiling by child compiler with applied NodeTargetPlugin. And when I do this, Webpack uses styled-components.browser.esm.js (this file declared in package.json in "browser" field). But in my expectations Webpack should pick styled-components.esm.js (not .brower.esm.js) because I use NodeTargetPlugin.

What should I do to force child compilation to use styled-components.esm.js instead of styled-components.browser.esm.js?

[braska]

More details here: jantimon/html-webpack-plugin#1590

[sokra]

You can create a Rule to modify the resolver option based on the compiler name:

module.rules: [
  {
    compiler: "html-webpack-plugin",
    resolve: {
      /* ... */
      // This will merge with the current resolve options
      // Arrays will be overriden, but they can use `"..."` to reference to previous items
      // It's not possible to reference previous items except some of them
      // This might be a limitation and we might need to add something to support that
    }
  }
]

If you want to add rules via plugin, do something like:

apply(compiler) {
  compiler.options.module.defaultsRules.push({ ... });
}