merging loaders and making plugins unique?

[b3nk3]

OS: Win10
Node: v14.15.4

Hi there,

following the examples I have been able to merge my loaders by using mergeWithRules and I have also been able to test out mergeWithCustomize and customizeArray successfully.

However, I need to combine the two steps, as the configs I'm merging have different options for some of the plugin options.

Is this possible?

Looking at the source, I can see that mergeWithRules returns mergeWithCustomize but unable to figure out how to combine the two.

const mergedConfig = mergeWithRules(
  {
    module: {
      rules: {
        test: 'match',
        use: {
          loader: 'match',
          options: 'replace',
        },
      },
    },
  },
  { customizeArray: unique('plugins', ['HtmlWebpackPlugin'], plugin => plugin.constructor && plugin.constructor.name) }
)(commonConfig, cmsConfig, prodConfig);
module.exports = mergedConfig;

[bebraw]

I've found it's easier to solve these cases through composition as that avoids the problem altogether and keeps merge simple. I see you are using HtmlWebpackPlugin so what I would do is to have it included at the most specific configuration (i.e. specifically at dev/prod/...).

Can you share your current configuration so I can propose how you could solve it this way?

[b3nk3]

I have it on two levels, in my cms config and prod config.
CMS:

new HtmlWebpackPlugin({
      template: 'src/cms.ejs',
      inject: true,
      filename: 'cms.html',
      templateParameters: {
        cms: 'localhost:9000',
      },
    }),

PROD:

new HtmlWebpackPlugin({
      template: 'src/cms.ejs',
      inject: true,
      filename: 'cms.html',
      templateParameters: {
        cms: 'realurls',
      },
    }),

[bebraw]

Ok, I see now.

I think this is how I would solve it.

...

// Add parameters as you prefer
function generateHtml({ templateParameters }) {
  return {
    plugins: [
      new HtmlWebpackPlugin({
        template: 'src/cms.ejs',
        inject: true,
        filename: 'cms.html',
        templateParameters
      })
    ]
  };
}

// ... then compose for both separately along this
module.exports = merge({ ... }, { ... }, generateHtml({ templateParameters: { cms: 'realurls' }}))

I think pushing it to a separate utility is a good way to solve it. If you use TypeScript, you can also document your API this way.

I've written a lot about the approach in my book (free) at https://survivejs.com/webpack/.

[bebraw]

Note that I edited my comment a bit. It should have close to correct syntax now. 👍

[b3nk3]

Okay, I had to combine this with the switch variation from the examples, but this part is now fully functional.

Do you have an advice for loader order?

[bebraw]

Do you have an advice for loader order?

I've used a similar approach for loaders. I.e. I wrap them into smaller functions to compose and then attach them per target. Some will fit common configuration directly and doing this avoids the need for mergeWithRules.

Can you paste your current loaders so I can propose a possible composition?

[b3nk3]

It's rather complex and I'd have to do some redactions haha.

Instead, I have sorted it based on your idea. :)

It's modular and only uses merge();

Thanks for your help.