https://github.com/preactjs/preact-cli/issues/1492

preact.config.js

/* eslint-disable max-len, import/no-extraneous-dependencies */
const glob = require('glob');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

export default {
  /**
   * Function that mutates the original webpack config.
   * Supports asynchronous changes when a promise is returned (or it's an async function).
   *
   * @param {object} config original webpack config.
   * @param {object} env options passed to the CLI.
   * @param {WebpackConfigHelpers} helpers object with useful helpers for working with the webpack config.
   * @param {object} options this is mainly relevant for plugins (will always be empty in the config), default to an empty object
   */
  webpack(config, env, helpers) {
    // disable plugins
    [
      'PushManifestPlugin',
      'HtmlWebpackPlugin',
      'HtmlWebpackExcludeAssetsPlugin',
      'PrerenderDataExtractPlugin',
      'MiniCssExtractPlugin', // will be customized
    ].forEach(pluginName => {
      const plugin = helpers.getPluginsByName(config, pluginName)[0];
      if (plugin) {
        const { index } = plugin;
        config.plugins.splice(index, 1);
      }
    });

    config.plugins.push(
      // customize filename
      new MiniCssExtractPlugin({
        filename: '[name].css',
        chunkFilename: '[name].chunk.css',
      })
    );
    config.plugins.push(
      // copy resources
      new CopyWebpackPlugin([
        { from: './assets/images', to: './images' },
        { from: './assets/fonts', to: './fonts' },
      ])
    );

    config.node.console = true;
    config.node.process = true;
    // max bundle size
    const limit = 500 * 1000;
    config.performance = {
      hints: 'warning',
      maxAssetSize: limit,
      maxEntrypointSize: limit,
    };

    const stripRoot = path => path.replace(/^\.\/src\/(.*)/, '$1');
    const stripExt = path => path.replace(/\.entry\.(?:js|scss)$/, '');
    const entry = path => ({ [stripExt(stripRoot(path))]: `./${stripRoot(path)}` });
    const toEntries = (acc, path) => ({ ...acc, ...entry(path) });
    const entries = glob.sync('./src/**/*.entry.{js,scss}').reduce(toEntries, {});

    // entry-points
    config.entry = {
      background: './background/index.js',
      content: './content/index.js',
      style: './style.scss',
      ...entries,
    };
    // generate file name on a predictable and consistent way
    config.output = {
      path: env.dest,
      filename: '[name].js',
      // FIXME: source maps couldn't be loaded by the chrome devtools
      // (see adblockplus issue: https://bit.ly/3kq9dzA)
      // I've tested to use `config.devtool = 'inline-source-map';` but,
      // it increases the bundle size considerably (~80%).
      // for now, we'll still not mapping our minified source code.
      // maybe we could consider to use `NODE_ENV` to use `inline-source-map`.
      sourceMapFilename: '[name].js.map',
      chunkFilename: '[name].chunk.[chunkhash:5].js',
    };
  },
};