@corespeed/webpack 0.0.0 → 0.1.0-beta.1

package/dist/index.cjs

@@ -0,0 +1,689 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var process$1 = require('node:process');
+var dotenv = require('dotenv');
+var node_module = require('node:module');
+var readBrowserslist = require('browserslist');
+var getPortPlease = require('get-port-please');
+var cleanWebpackPlugin = require('clean-webpack-plugin');
+var ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+var webpack = require('webpack');
+var CopyWebpackPlugin = require('copy-webpack-plugin');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var webpackBundleAnalyzer = require('webpack-bundle-analyzer');
+var WebpackBarProgressPlugin = require('webpackbar');
+var appendArrayInPlace = require('foxts/append-array-in-place');
+var MiniCssExtractPlugin = require('mini-css-extract-plugin');
+var TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+var isCI = require('is-ci');
+var prompts = require('@clack/prompts');
+var installPkg = require('@antfu/install-pkg');
+var castArray = require('foxts/cast-array');
+var LightningCSS = require('lightningcss');
+var reactCompilerWebpack = require('react-compiler-webpack');
+var TerserPlugin = require('terser-webpack-plugin');
+var lightningcssLoader = require('lightningcss-loader');
+var path = require('node:path');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var process__default = /*#__PURE__*/_interopDefault(process$1);
+var readBrowserslist__default = /*#__PURE__*/_interopDefault(readBrowserslist);
+var ReactRefreshPlugin__default = /*#__PURE__*/_interopDefault(ReactRefreshPlugin);
+var CopyWebpackPlugin__default = /*#__PURE__*/_interopDefault(CopyWebpackPlugin);
+var HtmlWebpackPlugin__default = /*#__PURE__*/_interopDefault(HtmlWebpackPlugin);
+var WebpackBarProgressPlugin__default = /*#__PURE__*/_interopDefault(WebpackBarProgressPlugin);
+var MiniCssExtractPlugin__default = /*#__PURE__*/_interopDefault(MiniCssExtractPlugin);
+var TsconfigPathsPlugin__default = /*#__PURE__*/_interopDefault(TsconfigPathsPlugin);
+var isCI__default = /*#__PURE__*/_interopDefault(isCI);
+var LightningCSS__default = /*#__PURE__*/_interopDefault(LightningCSS);
+var TerserPlugin__default = /*#__PURE__*/_interopDefault(TerserPlugin);
+var path__default = /*#__PURE__*/_interopDefault(path);
+
+function getSupportedBrowsers(browserlists, dir, isDevelopment) {
+    if (browserlists) {
+        return readBrowserslist__default.default(browserlists);
+    }
+    try {
+        return readBrowserslist.loadConfig({
+            path: dir,
+            env: isDevelopment ? 'development' : 'production'
+        });
+    } catch  {}
+}
+
+function getSwcOptions(isDevelopment, useTypeScript, supportedBrowsers, coreJsVersion) {
+    return {
+        jsc: {
+            parser: useTypeScript ? {
+                syntax: 'typescript',
+                tsx: true
+            } : {
+                syntax: 'ecmascript',
+                jsx: true,
+                importAttributes: true
+            },
+            externalHelpers: true,
+            loose: false,
+            transform: {
+                react: {
+                    runtime: 'automatic',
+                    refresh: isDevelopment,
+                    development: isDevelopment
+                },
+                optimizer: {
+                    simplify: true,
+                    globals: {
+                        // typeofs: {
+                        //   window: 'object'
+                        // },
+                        envs: {
+                            NODE_ENV: isDevelopment ? '"development"' : '"production"'
+                        }
+                    }
+                }
+            }
+        },
+        env: {
+            // swc-loader don't read browserslist config file, manually specify targets
+            targets: supportedBrowsers?.length ? supportedBrowsers : 'defaults, chrome > 70, edge >= 79, firefox esr, safari >= 11, not dead, not ie > 0, not ie_mob > 0, not OperaMini all',
+            mode: 'usage',
+            loose: false,
+            coreJs: coreJsVersion,
+            shippedProposals: false
+        }
+    };
+}
+
+const output = ({ output }, { jsFilename, cssFilename, assetFilename })=>(config)=>{
+        const { path: outputPath, library, crossOriginLoading } = output;
+        config.output ??= {};
+        config.output.asyncChunks = true;
+        config.output.crossOriginLoading ??= crossOriginLoading;
+        config.output.hashFunction = 'xxhash64';
+        config.output.hashDigestLength = 16;
+        config.output.path ??= outputPath;
+        config.output.library ??= library;
+        config.output.filename ??= jsFilename;
+        config.output.chunkFilename ??= jsFilename;
+        config.output.cssFilename ??= cssFilename;
+        config.output.cssChunkFilename ??= cssFilename;
+        config.output.assetModuleFilename ??= assetFilename;
+        config.output.hotUpdateChunkFilename = 'webpack/[id].[fullhash].hot-update.js';
+        config.output.hotUpdateMainFilename = 'webpack/[fullhash].[runtime].hot-update.json';
+        return config;
+    };
+
+const base = ({ development: isDevelopment, entry, webpackExperimentalBuiltinCssSupport })=>(config)=>{
+        config.mode ??= isDevelopment ? 'development' : 'production';
+        config.entry ??= entry;
+        config.experiments ??= {};
+        config.experiments.css ??= webpackExperimentalBuiltinCssSupport;
+        config.experiments.cacheUnaffected ??= true;
+        return config;
+    };
+
+const sourcemap = ({ development: isDevelopment, sourcemap })=>(config)=>{
+        const { development: sourceMapDevelopment = 'eval-source-map', production: sourceMapProduction = 'hidden-source-map' } = sourcemap;
+        config.devtool ??= isDevelopment ? sourceMapDevelopment : sourceMapProduction;
+        return config;
+    };
+
+const devserver = ({ devServerPort, spa, publicDir })=>async (config)=>{
+        const { fallbackPort: port = process.env.PORT ? Number(process.env.PORT || 3000) : 3000, portRange = [
+            3000,
+            3100
+        ], ports = [] } = devServerPort;
+        const finalPort = await getPortPlease.getPort({
+            port,
+            ports,
+            portRange
+        });
+        config.devServer ??= {};
+        config.devServer.port ??= finalPort;
+        config.devServer.hot ??= true;
+        config.devServer.historyApiFallback ??= spa;
+        config.devServer.static ??= {};
+        if (typeof config.devServer.static === 'object' && !Array.isArray(config.devServer.static)) {
+            config.devServer.static.directory ??= publicDir;
+        }
+        // in any case being a string, array, boolean, we do not override it
+        config.devServer.client ??= {};
+        if (typeof config.devServer.client === 'object') {
+            config.devServer.client.overlay ??= {};
+            if (typeof config.devServer.client.overlay === 'object') {
+                config.devServer.client.overlay.errors ??= true;
+                config.devServer.client.overlay.warnings ??= false;
+            }
+        }
+        return config;
+    };
+
+const plugins = ({ development: isDevelopment, htmlTemplatePath, analyze, webpackExperimentalBuiltinCssSupport, plugins: customPlugins }, { cssFilename })=>(config)=>{
+        config.plugins ??= [];
+        if (!isDevelopment) {
+            config.plugins.push(new cleanWebpackPlugin.CleanWebpackPlugin(), new WebpackBarProgressPlugin__default.default());
+        }
+        if (isDevelopment) {
+            config.plugins.push(new ReactRefreshPlugin__default.default());
+        }
+        if (!webpackExperimentalBuiltinCssSupport) {
+            config.plugins.push(new MiniCssExtractPlugin__default.default({
+                filename: cssFilename
+            }));
+        }
+        // env inline
+        const publicEnv = Object.entries(process.env).reduce((acc, [key, value])=>{
+            if (key.startsWith('PUBLIC_') || key.startsWith('NEXT_PUBLIC_')) {
+                acc[`process.env.${key}`] = JSON.stringify(value);
+            }
+            return acc;
+        }, {});
+        config.plugins.push(new webpack.DefinePlugin({
+            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || (isDevelopment ? 'development' : 'production')),
+            'import.meta.env.DEV': isDevelopment.toString(),
+            'import.meta.env.PROD': (!isDevelopment).toString(),
+            'typeof window': JSON.stringify('object'),
+            'process.env': JSON.stringify(publicEnv),
+            ...publicEnv
+        }), new CopyWebpackPlugin__default.default({
+            patterns: [
+                {
+                    from: 'public',
+                    to: '.',
+                    // globOptions: {
+                    //   ignore: ['**/index.html']
+                    // },
+                    noErrorOnMissing: true
+                }
+            ]
+        }));
+        if (htmlTemplatePath) {
+            config.plugins.push(new HtmlWebpackPlugin__default.default({
+                template: htmlTemplatePath
+            }));
+        }
+        if (analyze) {
+            config.plugins.push(new webpackBundleAnalyzer.BundleAnalyzerPlugin(typeof analyze === 'object' ? analyze : {
+                analyzerMode: 'static'
+            }));
+        }
+        appendArrayInPlace.appendArrayInPlace(config.plugins, customPlugins);
+        return config;
+    };
+
+async function ensurePackage(packages, cwd, dev) {
+    const globalRequire = node_module.createRequire(cwd);
+    const missingPackages = new Set();
+    for (const packageName of castArray.castArray(packages)){
+        try {
+            globalRequire.resolve(packageName, {
+                paths: [
+                    cwd
+                ]
+            });
+        } catch (e) {
+            if (typeof e === 'object' && e && 'code' in e && e.code === 'MODULE_NOT_FOUND') {
+                missingPackages.add(packageName);
+            }
+        }
+    }
+    if (missingPackages.size === 0) {
+        return;
+    }
+    if (isCI__default.default) {
+        throw new Error(`Missing required packages: ${[
+            ...missingPackages
+        ].join(', ')}. Please ensure all required packages are installed.`);
+    }
+    const result = await prompts.confirm({
+        message: ` The following packages are required but not installed: ${[
+            ...missingPackages
+        ].join(', ')}. Do you want to install them now?`,
+        initialValue: true
+    });
+    if (result) {
+        await installPkg.installPackage([
+            ...missingPackages
+        ], {
+            dev
+        });
+    }
+}
+
+const resolve = ({ cwd, lodashTreeShaking })=>async (config)=>{
+        config.resolve ??= {};
+        const extensions = [
+            '.ts',
+            '.tsx',
+            '.jsx',
+            '.mjs',
+            '.cjs',
+            '.js',
+            '.json'
+        ];
+        config.resolve.extensions = extensions;
+        config.resolve.cache = true;
+        config.resolve.unsafeCache = false;
+        config.resolve.conditionNames = [
+            'import',
+            'module',
+            'require',
+            'default'
+        ];
+        config.resolve.plugins ??= [];
+        config.resolve.plugins.push(new TsconfigPathsPlugin__default.default({
+            // tsconfig-paths-webpack-plugin can't access `resolve.extensions`
+            // have to provide again
+            extensions
+        }));
+        const globalRequire = node_module.createRequire(cwd);
+        if (lodashTreeShaking) {
+            await ensurePackage('lodash-es', cwd, true);
+            config.resolve.alias ??= {};
+            if (!Array.isArray(config.resolve.alias)) {
+                config.resolve.alias.lodash = 'lodash-es';
+            }
+            config.resolve.fallback ??= {};
+            if (!Array.isArray(config.resolve.fallback)) {
+                config.resolve.fallback['lodash-es/fp'] = globalRequire.resolve('lodash/fp');
+            }
+        }
+        return config;
+    };
+
+const external = ({ externals })=>(config)=>{
+        const finalExternals = [];
+        if (config.externals) {
+            if (Array.isArray(config.externals)) {
+                appendArrayInPlace.appendArrayInPlace(finalExternals, config.externals);
+            } else {
+                finalExternals.push(config.externals);
+            }
+        }
+        finalExternals.push(externals);
+        config.externals = finalExternals;
+        return config;
+    };
+
+const regexLikeCss = /\.(css|scss|sass)$/;
+const $require = typeof globalThis.require === 'function' ? globalThis.require : node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)));
+const loaders = ({ cwd, postcss, svgr, reactCompiler, webpackExperimentalBuiltinCssSupport, browserlists }, { swcTypeScriptOptions, swcJavaScriptOptions, supportedBrowsers })=>async (config)=>{
+        await ensurePackage([
+            'core-js',
+            '@swc/helpers'
+        ], cwd, false);
+        const blocks = [];
+        config.module ??= {};
+        config.module.rules ??= [];
+        // Automatically transform references to files (i.e. url()) into URLs
+        loader({
+            oneOf: [
+                {
+                    // This should only be applied to CSS files
+                    issuer: regexLikeCss,
+                    // Exclude extensions that webpack handles by default
+                    exclude: [
+                        /\.(js|mjs|jsx|ts|tsx)$/,
+                        /\.html$/,
+                        /\.json$/,
+                        /\.webpack\[[^\]]+]$/
+                    ],
+                    // `asset/resource` always emits a URL reference, where `asset`
+                    // might inline the asset as a data URI
+                    type: 'asset/resource'
+                }
+            ]
+        });
+        // CSS
+        if (postcss) {
+            await ensurePackage([
+                'postcss',
+                'postcss-loader'
+            ], cwd, true);
+        }
+        const globalRequire = node_module.createRequire(cwd);
+        if (!webpackExperimentalBuiltinCssSupport || postcss) {
+            loader({
+                test: /\.css$/,
+                use: [
+                    !webpackExperimentalBuiltinCssSupport && {
+                        loader: MiniCssExtractPlugin.loader
+                    },
+                    !webpackExperimentalBuiltinCssSupport && {
+                        loader: $require.resolve('css-loader')
+                    },
+                    {
+                        loader: $require.resolve('lightningcss-loader'),
+                        options: {
+                            implementation: LightningCSS__default.default,
+                            // lightningcss-loader will read targets and parsed via browserlists
+                            // https://github.com/fz6m/lightningcss-loader/blob/7f3601abea4479deb31db713610c5a09e8a5d576/src/loader.ts#L44
+                            // https://github.com/fz6m/lightningcss-loader/blob/7f3601abea4479deb31db713610c5a09e8a5d576/src/minify.ts#L111
+                            // https://github.com/fz6m/lightningcss-loader/blob/7f3601abea4479deb31db713610c5a09e8a5d576/src/utils.ts#L39
+                            targets: browserlists ?? supportedBrowsers
+                        }
+                    },
+                    postcss && globalRequire.resolve('postcss-loader')
+                ]
+            });
+        }
+        // SVGR
+        if (svgr) {
+            await ensurePackage('@svgr/webpack', cwd, true);
+            loader({
+                test: /\.svg$/i,
+                type: 'asset',
+                resourceQuery: /url/ // *.svg?url
+            });
+            loader({
+                test: /\.svg$/i,
+                issuer: /\.[jt]sx?$/,
+                resourceQuery: {
+                    not: [
+                        /url/
+                    ]
+                },
+                use: [
+                    {
+                        loader: $require.resolve('swc-loader'),
+                        options: swcTypeScriptOptions
+                    },
+                    {
+                        loader: globalRequire.resolve('@svgr/webpack'),
+                        options: {
+                            babel: false
+                        }
+                    }
+                ]
+            });
+        }
+        // Assets
+        loader({
+            oneOf: [
+                {
+                    test: /\.(woff|woff2|eot|ttf|otf)$/i,
+                    type: 'asset/resource'
+                },
+                {
+                    test: /assets\//,
+                    type: 'asset/resource',
+                    generator: {
+                        filename: '_assets/[hash][ext][query]'
+                    }
+                }
+            ]
+        });
+        // TypeScript/JavaScript
+        if (reactCompiler) {
+            await ensurePackage('babel-plugin-react-compiler', cwd, true);
+        }
+        loader({
+            test: /\.[cm]?tsx?$/,
+            exclude: [
+                /node_modules/
+            ],
+            use: [
+                {
+                    loader: $require.resolve('swc-loader'),
+                    options: swcTypeScriptOptions
+                },
+                reactCompiler && {
+                    loader: reactCompilerWebpack.reactCompilerLoader,
+                    options: reactCompilerWebpack.defineReactCompilerLoaderOption(typeof reactCompiler === 'object' ? reactCompiler : {})
+                }
+            ]
+        });
+        loader({
+            test: /\.[cm]?jsx?$/,
+            exclude: [
+                /node_modules/
+            ],
+            use: [
+                {
+                    loader: $require.resolve('swc-loader'),
+                    options: swcJavaScriptOptions
+                },
+                reactCompiler && {
+                    loader: reactCompilerWebpack.reactCompilerLoader,
+                    options: reactCompilerWebpack.defineReactCompilerLoaderOption(typeof reactCompiler === 'object' ? reactCompiler : {})
+                }
+            ]
+        });
+        return blocks.reduce(async (cfg, next)=>next(await cfg), config);
+        function loader(rule) {
+            blocks.push((config)=>{
+                if (rule.oneOf) {
+                    const existing = config.module.rules.find((arrayRule)=>arrayRule && typeof arrayRule === 'object' && arrayRule.oneOf);
+                    if (existing && typeof existing === 'object') {
+                        existing.oneOf.push(...rule.oneOf);
+                        return config;
+                    }
+                }
+                config.module.rules.push(rule);
+                return config;
+            });
+        }
+    // function unshiftLoader(
+    //   rule: WebpackRuleSetRule
+    // ) {
+    //   blocks.push((config: WebpackConfiguration) => {
+    //     if (rule.oneOf) {
+    //       const existing = config.module!.rules!.find(
+    //         (arrayRule) => arrayRule && typeof arrayRule === 'object' && arrayRule.oneOf
+    //       );
+    //       if (existing && typeof existing === 'object') {
+    //         existing.oneOf?.unshift(...rule.oneOf);
+    //         return config;
+    //       }
+    //     }
+    //     config.module!.rules!.unshift(rule);
+    //     return config;
+    //   });
+    // };
+    };
+
+const optimization = ({ development: isDevelopment, browserlists }, { supportedBrowsers })=>(config)=>{
+        config.optimization ??= {};
+        config.optimization.emitOnErrors = !isDevelopment;
+        config.optimization.checkWasmTypes = false;
+        config.optimization.nodeEnv = false; // we manually bring our own DefinePlugin
+        config.optimization.minimizer ??= [];
+        config.optimization.minimizer.push(new TerserPlugin__default.default({
+            minify: TerserPlugin__default.default.swcMinify,
+            terserOptions: {
+                compress: {
+                    ecma: 2018,
+                    comparisons: false,
+                    inline: 2 // https://github.com/vercel/next.js/issues/7178#issuecomment-493048965
+                },
+                mangle: {
+                    safari10: true
+                },
+                format: {
+                    // use ecma 2015+ to enable minify like shorthand object
+                    ecma: 2018,
+                    safari10: true,
+                    comments: false,
+                    // Fixes usage of Emoji and certain Regex
+                    ascii_only: true
+                }
+            }
+        }), new lightningcssLoader.LightningCssMinifyPlugin({
+            implementation: LightningCSS__default.default,
+            // lightningcss-loader will read targets and parsed via browserlists
+            // https://github.com/fz6m/lightningcss-loader/blob/7f3601abea4479deb31db713610c5a09e8a5d576/src/loader.ts#L44
+            // https://github.com/fz6m/lightningcss-loader/blob/7f3601abea4479deb31db713610c5a09e8a5d576/src/minify.ts#L111
+            // https://github.com/fz6m/lightningcss-loader/blob/7f3601abea4479deb31db713610c5a09e8a5d576/src/utils.ts#L39
+            targets: browserlists ?? supportedBrowsers
+        }));
+        return config;
+    };
+
+function getTopLevelFrameworkPaths(frameworkPackages, dir) {
+    const globalRequire = node_module.createRequire(dir);
+    // Only top-level packages are included, e.g. nested copies like
+    // 'node_modules/meow/node_modules/react' are not included.
+    const topLevelFrameworkPaths = [];
+    const visitedFrameworkPackages = new Set();
+    // Adds package-paths of dependencies recursively
+    const addPackagePath = (packageName, relativeToPath)=>{
+        try {
+            if (visitedFrameworkPackages.has(packageName)) return;
+            visitedFrameworkPackages.add(packageName);
+            const packageJsonPath = globalRequire.resolve(`${packageName}/package.json`, {
+                paths: [
+                    relativeToPath
+                ]
+            });
+            // Include a trailing slash so that a `.startsWith(packagePath)` check avoids false positives
+            // when one package name starts with the full name of a different package.
+            // For example:
+            //   "node_modules/react-slider".startsWith("node_modules/react")  // true
+            //   "node_modules/react-slider".startsWith("node_modules/react/") // false
+            const directory = path__default.default.join(packageJsonPath, '../');
+            // Returning from the function in case the directory has already been added and traversed
+            if (topLevelFrameworkPaths.includes(directory)) return;
+            topLevelFrameworkPaths.push(directory);
+            const dependencies = globalRequire(packageJsonPath).dependencies || {};
+            for (const name of Object.keys(dependencies)){
+                addPackagePath(name, directory);
+            }
+        } catch  {
+        // don't error on failing to resolve framework packages
+        }
+    };
+    for (const packageName of frameworkPackages){
+        addPackagePath(packageName, dir);
+    }
+    return topLevelFrameworkPaths;
+}
+
+const splitChunks = ({ cwd, topLevelFrameworkPackages })=>(config)=>{
+        config.optimization ??= {};
+        if (config.optimization.runtimeChunk === 'single') {
+            config.optimization.runtimeChunk = {
+                name: 'webpack'
+            };
+        } else {
+            config.optimization.runtimeChunk ??= {
+                name: 'webpack'
+            };
+        }
+        config.optimization.splitChunks ||= {};
+        config.optimization.splitChunks.maxInitialRequests = 25;
+        config.optimization.splitChunks.minSize = 20000;
+        config.optimization.splitChunks.cacheGroups ??= {};
+        const topLevelFrameworkPaths = getTopLevelFrameworkPaths(topLevelFrameworkPackages, cwd);
+        config.optimization.splitChunks.cacheGroups.framework ||= {
+            chunks: 'all',
+            name: 'framework',
+            test (module) {
+                const resource = module.nameForCondition();
+                return resource ? topLevelFrameworkPaths.some((pkgPath)=>resource.startsWith(pkgPath)) : false;
+            },
+            priority: 40,
+            enforce: true
+        };
+        return config;
+    };
+
+/**
+ * Usage:
+ *
+ * ```js
+ * // webpack.config.js
+ * const { createWebpck } = require('@corespeed/webpack');
+ * const path = require('node:path');
+ *
+ * module.exports = createWebpack({
+ *   // your options here
+ * }, {
+ *  // your custom webpack config here
+ * });
+ * ```
+ */ async function createWebpack(options, customWebpackOptions = {}) {
+    const ctx = {
+        output: {},
+        spa: true,
+        publicDir: './public',
+        development: process__default.default.env.NODE_ENV === 'development',
+        // entry,
+        htmlTemplatePath: './src/index.html',
+        sourcemap: {},
+        devServerPort: {},
+        externals: {},
+        webpackExperimentalBuiltinCssSupport: false,
+        postcss: false,
+        svgr: false,
+        topLevelFrameworkPackages: [
+            'react',
+            'react-dom',
+            'wouter',
+            'react-router',
+            'react-router-dom'
+        ],
+        reactCompiler: false,
+        analyze: process__default.default.env.ANALYZE === 'true',
+        plugins: [],
+        dotenv: {},
+        lodashTreeShaking: false,
+        ...options
+    };
+    // dotenv
+    if (ctx.dotenv) {
+        if (typeof ctx.dotenv === 'boolean') {
+            dotenv.configDotenv();
+        } else {
+            dotenv.configDotenv(ctx.dotenv);
+        }
+    }
+    // Output
+    const { filenameContainChunkName: outputChunkFileFormatContainChunkName = false, filenamePrefix: _outputFilenamePrefix = '/_assets/static/' } = ctx.output;
+    const prodOnlyChunkName = outputChunkFileFormatContainChunkName ? '[name].' : '';
+    const outputFilenamePrefix = ensureFilenamePrefix(_outputFilenamePrefix);
+    // MiniCssExtractPlugin do not read output.cssFilename
+    // https://github.com/webpack/mini-css-extract-plugin/issues/1041
+    // So we need to pass cssFilename to both output.cssFilename and new MiniCssExtractPlugin({ filename: ... })
+    // So we calculate them ahead here and pass via block context
+    const jsFilename = outputFilenamePrefix + 'js/' + (ctx.development ? '[name].js' : prodOnlyChunkName + '[contenthash].js');
+    const cssFilename = outputFilenamePrefix + 'css/' + (ctx.development ? '[name].css' : prodOnlyChunkName + '[contenthash].css');
+    const assetFilename = outputFilenamePrefix + 'assets/' + (ctx.development ? '[name].[hash][ext][query]' : prodOnlyChunkName + '[hash][ext][query]');
+    // Misc
+    const supportedBrowsers = getSupportedBrowsers(ctx.browserlists, ctx.cwd, ctx.development);
+    supportedBrowsers ? LightningCSS.browserslistToTargets(supportedBrowsers) : undefined;
+    const globalRequire = node_module.createRequire(ctx.cwd);
+    const coreJsVersion = globalRequire('core-js/package.json').version;
+    const blockCtx = {
+        swcJavaScriptOptions: getSwcOptions(ctx.development, false, supportedBrowsers, coreJsVersion),
+        swcTypeScriptOptions: getSwcOptions(ctx.development, true, supportedBrowsers, coreJsVersion),
+        supportedBrowsers,
+        jsFilename,
+        cssFilename,
+        assetFilename
+    };
+    return [
+        base(ctx),
+        external(ctx),
+        output(ctx, blockCtx),
+        sourcemap(ctx),
+        devserver(ctx),
+        loaders(ctx, blockCtx),
+        plugins(ctx, blockCtx),
+        optimization(ctx, blockCtx),
+        splitChunks(ctx),
+        resolve(ctx)
+    ].reduce(async (config, next)=>next(await config), customWebpackOptions);
+}
+function ensureFilenamePrefix(path) {
+    if (path.startsWith('/')) {
+        path = path.slice(1);
+    }
+    if (!path.endsWith('/')) {
+        path = path + '/';
+    }
+    return path;
+}
+
+exports.createWebpack = createWebpack;