feat: enable inline chunks based on conditions through output options

[Thulof]

Summary

Support inline chunks in development mode

Related Links

#2957

Checklist

• Tests updated (or not required).
• Documentation updated (or not required).

[chenjiahan]

Thanks for your contribution!

I prefer extend the current output.inlineStyles config instead of adding a new dev.inlineStyles config.

We can extend the config type like this:

type InlineStylesTest =
  | RegExp
  | ((params: { size: number; name: string }) => boolean);

type InlineStyles =
  | boolean
  | InlineStylesTest
  | {
      enable?: boolean | 'auto';
      test: InlineStylesTest;
    };

Example:

export default {
  output: {
    inlineStyles: {
      enable: true,
      test: /[\\/]main\.\w+\.css$/,
    },
  },
};

And output.inlineStyles: true is equivalent to enable: 'auto', which means it is only enabled in production build.

export default {
  output: {
    inlineStyles: {
      enable: 'auto',
    },
  },
};

If enable is true, it will works in both dev build and prod build:

export default {
  output: {
    inlineStyles: {
      enable: true,
    },
  },
};

[chenjiahan]

Awesome! Thanks ❤️