feat: add preset configuration support to webpack

[burhanuday]

Summary

Motivation:
Currently, setting up Webpack configurations can be a time-consuming process, especially for new users. By introducing preset support, we aim to simplify this process and provide a more streamlined experience. Users can select a preset that aligns with their project requirements, reducing the need to write complex configurations from scratch.

This PR introduces a new feature to Webpack, allowing users to add presets as their configuration. A preset is a base configuration that can be extended from, providing a convenient way for users to set up their projects quickly and efficiently.

🤖 Generated by Copilot at 15be2ad

This pull request adds a new feature to support Presets in webpack configuration. Presets are arrays of predefined options that can be applied to the whole configuration or to individual configurations in an array. The pull request introduces a new class PresetProcessor that uses the webpack-merge module to merge the preset configurations into the webpack options object. It also updates the lib/webpack.js, schemas/WebpackOptions.json, lib/config/normalization.js, .eslintignore, package.json, and package-lock.json files to enable and support the new feature.

Details

The syntax i am working towards is:

module.exports = {
  presets: WebpackOptions[]
  // Other configuration options...
};

so that the usage looks something like this

// non existent packages
const react = require("react-preset-webpack");
const tailwind = require("tailwind-preset-webpack");

module.exports = {
  presets: [react(), tailwind()]
  // Other configuration options...
};

This opens up the possibility to pass an options object to the plugin

// non existent packages
const tailwind = require("tailwind-preset-webpack");

module.exports = {
  presets: [tailwind({
    config: "./tailwind.config.js"
  })]
  // Other configuration options...
};

🤖 Generated by Copilot at 15be2ad

• Add support for presets in webpack configuration (link, link, link, link, link)
• Exclude .mjs files from linting process (link)
• Add webpack-merge dependency to package.json (link)

[webpack-bot]

For maintainers only:

• This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
• This needs to be backported to webpack 4 (issue will be created when merged)

[burhanuday]

@alexander-akait @TheLarkInn @snitin315 let me know your thoughts on this. if this is not the approach we want to take, i'll drop this

[TheLarkInn]

@burhanuday there's one scenario that I recall @patak-dev called out to me when discussing this feature. I believe that Rollup/Vite has the ability to have -plugin's be a collection of applied plugins.

What I would like to see is a adding a test case that covers a variety of scenarios where:

• One preset adds transitively multiple presets
• Preset A => Preset B => Preset C
• Potentially mitigating some merge cases (but maybe thats a webpack-merge scenario) or custom logic in the Processor

[burhanuday]

@TheLarkInn added a complex working example with the situation you mentioned above

The webpack.config.js has two presets simple and react. The simple preset depends on preset css

webpack.config.js 
        => simple
              => css
        => react

[burhanuday]

Opened a PR in webpack-merge to deep merge loader options - survivejs/webpack-merge#206

[burhanuday]

The webpack-merge PR has been merged. It means that options will now be deep merged. This approach is viable 🎉

[burhanuday]

@TheLarkInn friendly ping here

[TheLarkInn]

Let's rebase @burhanuday and this is going through review here this week. Appreciate the patience and work on this. 👏

[webpack-bot]

@ Thanks for your update.

I labeled the Pull Request so reviewers will review it again.

@TheLarkInn Please review the new changes.