@umijs/bundler-webpack 4.0.0-rc.14 → 4.0.0-rc.17

package/dist/config/config.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -38,189 +29,190 @@ const nodePolyfill_1 = require("./nodePolyfill");
 const progressPlugin_1 = require("./progressPlugin");
 const speedMeasureWebpackPlugin_1 = require("./speedMeasureWebpackPlugin");
 const svgRules_1 = require("./svgRules");
-function getConfig(opts) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const { userConfig } = opts;
-        const isDev = opts.env === types_1.Env.development;
-        const config = new webpack_5_chain_1.default();
-        userConfig.targets || (userConfig.targets = constants_1.DEFAULT_BROWSER_TARGETS);
-        const useHash = !!(opts.hash || (userConfig.hash && !isDev));
-        const applyOpts = {
-            name: opts.name,
-            config,
-            userConfig,
-            cwd: opts.cwd,
-            env: opts.env,
-            babelPreset: opts.babelPreset,
-            extraBabelPlugins: opts.extraBabelPlugins || [],
-            extraBabelPresets: opts.extraBabelPresets || [],
-            extraBabelIncludes: opts.extraBabelIncludes || [],
-            extraEsbuildLoaderHandler: opts.extraEsbuildLoaderHandler || [],
-            browsers: (0, browsersList_1.getBrowsersList)({
-                targets: userConfig.targets,
-            }),
-            useHash,
-            staticPathPrefix: opts.staticPathPrefix !== undefined ? opts.staticPathPrefix : 'static/',
-        };
-        // mode
-        config.mode(opts.env);
-        config.stats('none');
-        // entry
-        Object.keys(opts.entry).forEach((key) => {
-            const entry = config.entry(key);
-            if (isDev && opts.hmr) {
-                entry.add(require.resolve('../../client/client/client'));
-            }
-            entry.add(opts.entry[key]);
-        });
-        // devtool
-        config.devtool(isDev
-            ? userConfig.devtool === false
-                ? false
-                : userConfig.devtool || constants_1.DEFAULT_DEVTOOL
-            : userConfig.devtool);
-        // output
-        const absOutputPath = (0, path_1.join)(opts.cwd, userConfig.outputPath || constants_1.DEFAULT_OUTPUT_PATH);
-        const disableCompress = process.env.COMPRESS === 'none';
-        config.output
-            .path(absOutputPath)
-            .filename(useHash ? `[name].[contenthash:8].js` : `[name].js`)
-            .chunkFilename(useHash ? `[name].[contenthash:8].async.js` : `[name].js`)
-            .publicPath(userConfig.publicPath || 'auto')
-            .pathinfo(isDev || disableCompress);
-        // resolve
-        // prettier-ignore
-        config.resolve
-            .set('symlinks', true)
-            .modules
-            .add('node_modules')
-            .end()
-            .alias
-            .merge(userConfig.alias || {})
-            .end()
-            .extensions
-            .merge([
-            '.wasm',
-            '.mjs',
-            '.js',
-            '.jsx',
-            '.ts',
-            '.tsx',
-            '.json'
-        ])
-            .end();
-        // externals
-        config.externals(userConfig.externals || []);
-        // target
-        config.target(['web', 'es5']);
-        // experiments
-        config.experiments({
-            topLevelAwait: true,
-            outputModule: !!userConfig.esm,
-        });
-        // node polyfill
-        yield (0, nodePolyfill_1.addNodePolyfill)(applyOpts);
-        // rules
-        yield (0, javaScriptRules_1.addJavaScriptRules)(applyOpts);
-        yield (0, cssRules_1.addCSSRules)(applyOpts);
-        yield (0, assetRules_1.addAssetRules)(applyOpts);
-        yield (0, svgRules_1.addSVGRules)(applyOpts);
-        // plugins
-        // mini-css-extract-plugin
-        yield (0, miniCSSExtractPlugin_1.addMiniCSSExtractPlugin)(applyOpts);
-        // ignoreMomentLocale
-        yield (0, ignorePlugin_1.addIgnorePlugin)(applyOpts);
-        // define
-        yield (0, definePlugin_1.addDefinePlugin)(applyOpts);
-        // fast refresh
-        yield (0, fastRefreshPlugin_1.addFastRefreshPlugin)(applyOpts);
-        // progress
-        yield (0, progressPlugin_1.addProgressPlugin)(applyOpts);
-        // detect-dead-code-plugin
-        yield (0, detectDeadCodePlugin_1.addDetectDeadCodePlugin)(applyOpts);
-        // fork-ts-checker
-        yield (0, forkTSCheckerPlugin_1.addForkTSCheckerPlugin)(applyOpts);
-        // copy
-        yield (0, copyPlugin_1.addCopyPlugin)(applyOpts);
-        // manifest
-        yield (0, manifestPlugin_1.addManifestPlugin)(applyOpts);
-        // hmr
+async function getConfig(opts) {
+    const { userConfig } = opts;
+    const isDev = opts.env === types_1.Env.development;
+    const config = new webpack_5_chain_1.default();
+    userConfig.targets || (userConfig.targets = constants_1.DEFAULT_BROWSER_TARGETS);
+    const useHash = !!(opts.hash || (userConfig.hash && !isDev));
+    const applyOpts = {
+        name: opts.name,
+        config,
+        userConfig,
+        cwd: opts.cwd,
+        env: opts.env,
+        babelPreset: opts.babelPreset,
+        extraBabelPlugins: opts.extraBabelPlugins || [],
+        extraBabelPresets: opts.extraBabelPresets || [],
+        extraBabelIncludes: opts.extraBabelIncludes || [],
+        extraEsbuildLoaderHandler: opts.extraEsbuildLoaderHandler || [],
+        browsers: (0, browsersList_1.getBrowsersList)({
+            targets: userConfig.targets,
+        }),
+        useHash,
+        staticPathPrefix: opts.staticPathPrefix !== undefined ? opts.staticPathPrefix : 'static/',
+    };
+    // mode
+    config.mode(opts.env);
+    config.stats('none');
+    // entry
+    Object.keys(opts.entry).forEach((key) => {
+        const entry = config.entry(key);
         if (isDev && opts.hmr) {
-            config.plugin('hmr').use(webpack_1.default.HotModuleReplacementPlugin);
-        }
-        // compress
-        yield (0, compressPlugin_1.addCompressPlugin)(applyOpts);
-        // purgecss
-        // await applyPurgeCSSWebpackPlugin(applyOpts);
-        // handle HarmonyLinkingError
-        yield (0, harmonyLinkingErrorPlugin_1.addHarmonyLinkingErrorPlugin)(applyOpts);
-        // remove node: prefix
-        // disable for performance
-        // await addNodePrefixPlugin(applyOpts);
-        // runtimePublicPath
-        if (userConfig.runtimePublicPath) {
-            config.plugin('runtimePublicPath').use(RuntimePublicPathPlugin_1.RuntimePublicPathPlugin);
+            entry.add(require.resolve('../../client/client/client'));
         }
-        // cache
-        if (opts.cache) {
-            config.cache({
-                type: 'filesystem',
-                version: require('../../package.json').version,
-                buildDependencies: {
-                    config: opts.cache.buildDependencies || [],
-                },
-                cacheDirectory: opts.cache.cacheDirectory ||
-                    // 使用 rootDir 是在有 APP_ROOT 时，把 cache 目录放在根目录下
-                    (0, path_1.join)(opts.rootDir || opts.cwd, 'node_modules', '.cache', 'bundler-webpack'),
+        entry.add(opts.entry[key]);
+    });
+    // devtool
+    config.devtool(isDev
+        ? userConfig.devtool === false
+            ? false
+            : userConfig.devtool || constants_1.DEFAULT_DEVTOOL
+        : userConfig.devtool);
+    // output
+    const absOutputPath = (0, path_1.join)(opts.cwd, userConfig.outputPath || constants_1.DEFAULT_OUTPUT_PATH);
+    const disableCompress = process.env.COMPRESS === 'none';
+    config.output
+        .path(absOutputPath)
+        .filename(useHash ? `[name].[contenthash:8].js` : `[name].js`)
+        .chunkFilename(useHash ? `[name].[contenthash:8].async.js` : `[name].js`)
+        .publicPath(userConfig.publicPath || 'auto')
+        .pathinfo(isDev || disableCompress);
+    // resolve
+    // prettier-ignore
+    config.resolve
+        .set('symlinks', true)
+        .modules
+        .add('node_modules')
+        .end()
+        .alias
+        .merge(userConfig.alias || {})
+        .end()
+        .extensions
+        .merge([
+        '.wasm',
+        '.mjs',
+        '.js',
+        '.jsx',
+        '.ts',
+        '.tsx',
+        '.json'
+    ])
+        .end();
+    // externals
+    config.externals(userConfig.externals || []);
+    // target
+    config.target(['web', 'es5']);
+    // experiments
+    config.experiments({
+        topLevelAwait: true,
+        outputModule: !!userConfig.esm,
+    });
+    // node polyfill
+    await (0, nodePolyfill_1.addNodePolyfill)(applyOpts);
+    // rules
+    await (0, javaScriptRules_1.addJavaScriptRules)(applyOpts);
+    await (0, cssRules_1.addCSSRules)(applyOpts);
+    await (0, assetRules_1.addAssetRules)(applyOpts);
+    await (0, svgRules_1.addSVGRules)(applyOpts);
+    // plugins
+    // mini-css-extract-plugin
+    await (0, miniCSSExtractPlugin_1.addMiniCSSExtractPlugin)(applyOpts);
+    // ignoreMomentLocale
+    await (0, ignorePlugin_1.addIgnorePlugin)(applyOpts);
+    // define
+    await (0, definePlugin_1.addDefinePlugin)(applyOpts);
+    // fast refresh
+    await (0, fastRefreshPlugin_1.addFastRefreshPlugin)(applyOpts);
+    // progress
+    await (0, progressPlugin_1.addProgressPlugin)(applyOpts);
+    // detect-dead-code-plugin
+    await (0, detectDeadCodePlugin_1.addDetectDeadCodePlugin)(applyOpts);
+    // fork-ts-checker
+    await (0, forkTSCheckerPlugin_1.addForkTSCheckerPlugin)(applyOpts);
+    // copy
+    await (0, copyPlugin_1.addCopyPlugin)(applyOpts);
+    // manifest
+    await (0, manifestPlugin_1.addManifestPlugin)(applyOpts);
+    // hmr
+    if (isDev && opts.hmr) {
+        config.plugin('hmr').use(webpack_1.default.HotModuleReplacementPlugin);
+    }
+    // compress
+    await (0, compressPlugin_1.addCompressPlugin)(applyOpts);
+    // purgecss
+    // await applyPurgeCSSWebpackPlugin(applyOpts);
+    // handle HarmonyLinkingError
+    await (0, harmonyLinkingErrorPlugin_1.addHarmonyLinkingErrorPlugin)(applyOpts);
+    // remove node: prefix
+    // disable for performance
+    // await addNodePrefixPlugin(applyOpts);
+    // runtimePublicPath
+    if (userConfig.runtimePublicPath) {
+        config.plugin('runtimePublicPath').use(RuntimePublicPathPlugin_1.RuntimePublicPathPlugin);
+    }
+    // cache
+    if (opts.cache) {
+        config.cache({
+            type: 'filesystem',
+            version: require('../../package.json').version,
+            buildDependencies: {
+                config: opts.cache.buildDependencies || [],
+            },
+            cacheDirectory: opts.cache.cacheDirectory ||
+                // 使用 rootDir 是在有 APP_ROOT 时，把 cache 目录放在根目录下
+                (0, path_1.join)(opts.rootDir || opts.cwd, 'node_modules', '.cache', 'bundler-webpack'),
+        });
+        // tnpm 安装依赖的情况 webpack 默认的 managedPaths 不生效
+        // 使用 immutablePaths 避免 node_modules 的内容被写入缓存
+        // tnpm 安装的依赖路径中同时包含包名和版本号，满足 immutablePaths 使用的条件
+        // ref: smallfish
+        if ( /*isTnpm*/require('@umijs/utils/package').__npminstall_done) {
+            config.snapshot({
+                immutablePaths: [
+                    opts.cache.absNodeModulesPath ||
+                        (0, path_1.join)(opts.rootDir || opts.cwd, 'node_modules'),
+                ],
             });
-            // tnpm 安装依赖的情况 webpack 默认的 managedPaths 不生效
-            // 使用 immutablePaths 避免 node_modules 的内容被写入缓存
-            // tnpm 安装的依赖路径中同时包含包名和版本号，满足 immutablePaths 使用的条件
-            // ref: smallfish
-            if ( /*isTnpm*/require('@umijs/utils/package').__npminstall_done) {
-                config.snapshot({
-                    immutablePaths: [
-                        opts.cache.absNodeModulesPath ||
-                            (0, path_1.join)(opts.rootDir || opts.cwd, 'node_modules'),
-                    ],
-                });
-            }
-            config.infrastructureLogging(Object.assign({ level: 'error' }, (process.env.WEBPACK_FS_CACHE_DEBUG
+        }
+        config.infrastructureLogging({
+            level: 'error',
+            ...(process.env.WEBPACK_FS_CACHE_DEBUG
                 ? {
                     debug: /webpack\.cache/,
                 }
-                : {})));
-        }
-        // analyzer
-        if (opts.analyze) {
-            yield (0, bundleAnalyzerPlugin_1.addBundleAnalyzerPlugin)(applyOpts);
-        }
-        // chain webpack
-        if (opts.chainWebpack) {
-            yield opts.chainWebpack(config, {
-                env: opts.env,
-                webpack: webpack_1.default,
-            });
-        }
-        if (userConfig.chainWebpack) {
-            yield userConfig.chainWebpack(config, {
-                env: opts.env,
-                webpack: webpack_1.default,
-            });
-        }
-        let webpackConfig = config.toConfig();
-        // speed measure
-        // TODO: mini-css-extract-plugin 报错
-        webpackConfig = yield (0, speedMeasureWebpackPlugin_1.addSpeedMeasureWebpackPlugin)({
-            webpackConfig,
+                : {}),
         });
-        if (opts.modifyWebpackConfig) {
-            webpackConfig = yield opts.modifyWebpackConfig(webpackConfig, {
-                env: opts.env,
-                webpack: webpack_1.default,
-            });
-        }
-        return webpackConfig;
+    }
+    // analyzer
+    if (opts.analyze) {
+        await (0, bundleAnalyzerPlugin_1.addBundleAnalyzerPlugin)(applyOpts);
+    }
+    // chain webpack
+    if (opts.chainWebpack) {
+        await opts.chainWebpack(config, {
+            env: opts.env,
+            webpack: webpack_1.default,
+        });
+    }
+    if (userConfig.chainWebpack) {
+        await userConfig.chainWebpack(config, {
+            env: opts.env,
+            webpack: webpack_1.default,
+        });
+    }
+    let webpackConfig = config.toConfig();
+    // speed measure
+    // TODO: mini-css-extract-plugin 报错
+    webpackConfig = await (0, speedMeasureWebpackPlugin_1.addSpeedMeasureWebpackPlugin)({
+        webpackConfig,
     });
+    if (opts.modifyWebpackConfig) {
+        webpackConfig = await opts.modifyWebpackConfig(webpackConfig, {
+            env: opts.env,
+            webpack: webpack_1.default,
+        });
+    }
+    return webpackConfig;
 }
 exports.getConfig = getConfig;

package/dist/config/copyPlugin.js

@@ -1,49 +1,38 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addCopyPlugin = void 0;
 const fs_1 = require("fs");
 const path_1 = require("path");
-function addCopyPlugin(opts) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const { config, userConfig, cwd } = opts;
-        const copyPatterns = [
-            (0, fs_1.existsSync)((0, path_1.join)(cwd, 'public')) && {
-                from: (0, path_1.join)(cwd, 'public'),
-            },
-            ...(userConfig.copy
-                ? userConfig.copy.map((item) => {
-                    if (typeof item === 'string') {
-                        return {
-                            from: (0, path_1.join)(cwd, item),
-                            to: item,
-                        };
-                    }
+async function addCopyPlugin(opts) {
+    const { config, userConfig, cwd } = opts;
+    const copyPatterns = [
+        (0, fs_1.existsSync)((0, path_1.join)(cwd, 'public')) && {
+            from: (0, path_1.join)(cwd, 'public'),
+        },
+        ...(userConfig.copy
+            ? userConfig.copy.map((item) => {
+                if (typeof item === 'string') {
                     return {
-                        // 相对于 process.cwd，所以这里需要使用绝对路径
-                        from: (0, path_1.join)(cwd, item.from),
-                        to: item.to,
+                        from: (0, path_1.join)(cwd, item),
+                        to: item,
                     };
-                })
-                : []),
-        ].filter(Boolean);
-        if (copyPatterns.length) {
-            config
-                .plugin('copy')
-                .use(require('@umijs/bundler-webpack/compiled/copy-webpack-plugin'), [
-                {
-                    patterns: copyPatterns,
-                },
-            ]);
-        }
-    });
+                }
+                return {
+                    // 相对于 process.cwd，所以这里需要使用绝对路径
+                    from: (0, path_1.join)(cwd, item.from),
+                    to: item.to,
+                };
+            })
+            : []),
+    ].filter(Boolean);
+    if (copyPatterns.length) {
+        config
+            .plugin('copy')
+            .use(require('@umijs/bundler-webpack/compiled/copy-webpack-plugin'), [
+            {
+                patterns: copyPatterns,
+            },
+        ]);
+    }
 }
 exports.addCopyPlugin = addCopyPlugin;

package/dist/config/cssRules.js

@@ -1,98 +1,108 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addCSSRules = void 0;
-function addCSSRules(opts) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const { config, userConfig } = opts;
-        const rulesConfig = [
-            { name: 'css', test: /\.css(\?.*)?$/ },
-            {
-                name: 'less',
-                test: /\.less(\?.*)?$/,
-                loader: require.resolve('@umijs/bundler-webpack/compiled/less-loader'),
-                loaderOptions: {
-                    implementation: require.resolve('@umijs/bundler-utils/compiled/less'),
-                    lessOptions: Object.assign({ modifyVars: userConfig.theme, javascriptEnabled: true }, userConfig.lessLoader),
+async function addCSSRules(opts) {
+    const { config, userConfig } = opts;
+    const rulesConfig = [
+        { name: 'css', test: /\.css(\?.*)?$/ },
+        {
+            name: 'less',
+            test: /\.less(\?.*)?$/,
+            loader: require.resolve('@umijs/bundler-webpack/compiled/less-loader'),
+            loaderOptions: {
+                implementation: require.resolve('@umijs/bundler-utils/compiled/less'),
+                lessOptions: {
+                    modifyVars: userConfig.theme,
+                    javascriptEnabled: true,
+                    ...userConfig.lessLoader,
                 },
             },
+        },
+        {
+            name: 'sass',
+            test: /\.(sass|scss)(\?.*)?$/,
+            loader: require.resolve('@umijs/bundler-webpack/compiled/sass-loader'),
+            loaderOptions: userConfig.sassLoader || {},
+        },
+    ];
+    for (const { name, test, loader, loaderOptions } of rulesConfig) {
+        const rule = config.module.rule(name);
+        const nestRulesConfig = [
+            userConfig.autoCSSModules && {
+                rule: rule
+                    .test(test)
+                    .oneOf('css-modules')
+                    .resourceQuery(/modules/),
+                isCSSModules: true,
+            },
             {
-                name: 'sass',
-                test: /\.(sass|scss)(\?.*)?$/,
-                loader: require.resolve('@umijs/bundler-webpack/compiled/sass-loader'),
-                loaderOptions: userConfig.sassLoader || {},
+                rule: rule.test(test).oneOf('css').sideEffects(true),
+                isCSSModules: false,
             },
-        ];
-        for (const { name, test, loader, loaderOptions } of rulesConfig) {
-            const rule = config.module.rule(name);
-            const nestRulesConfig = [
-                userConfig.autoCSSModules && {
-                    rule: rule
-                        .test(test)
-                        .oneOf('css-modules')
-                        .resourceQuery(/modules/),
-                    isCSSModules: true,
-                },
-                {
-                    rule: rule.test(test).oneOf('css').sideEffects(true),
-                    isCSSModules: false,
-                },
-            ].filter(Boolean);
-            // @ts-ignore
-            for (const { rule, isCSSModules } of nestRulesConfig) {
-                if (userConfig.styleLoader) {
-                    rule
-                        .use('style-loader')
-                        .loader(require.resolve('@umijs/bundler-webpack/compiled/style-loader'))
-                        .options(Object.assign({ base: 0, esModule: true }, userConfig.styleLoader));
-                }
-                else {
-                    rule
-                        .use('mini-css-extract-plugin')
-                        .loader(require.resolve('@umijs/bundler-webpack/compiled/mini-css-extract-plugin/loader'))
-                        .options({
-                        publicPath: './',
-                        emit: true,
-                        esModule: true,
-                    });
-                }
+        ].filter(Boolean);
+        // @ts-ignore
+        for (const { rule, isCSSModules } of nestRulesConfig) {
+            if (userConfig.styleLoader) {
                 rule
-                    .use('css-loader')
-                    .loader(require.resolve('css-loader'))
-                    .options(Object.assign(Object.assign({ importLoaders: 1, esModule: true, url: true, import: true }, (isCSSModules
-                    ? {
-                        modules: Object.assign({ localIdentName: '[local]___[hash:base64:5]' }, userConfig.cssLoaderModules),
-                    }
-                    : {})), userConfig.cssLoader));
+                    .use('style-loader')
+                    .loader(require.resolve('@umijs/bundler-webpack/compiled/style-loader'))
+                    .options({ base: 0, esModule: true, ...userConfig.styleLoader });
+            }
+            else {
                 rule
-                    .use('postcss-loader')
-                    .loader(require.resolve('@umijs/bundler-webpack/compiled/postcss-loader'))
+                    .use('mini-css-extract-plugin')
+                    .loader(require.resolve('@umijs/bundler-webpack/compiled/mini-css-extract-plugin/loader'))
                     .options({
-                    postcssOptions: Object.assign({ ident: 'postcss', plugins: [
-                            require('@umijs/bundler-webpack/compiled/postcss-flexbugs-fixes'),
-                            require('postcss-preset-env')({
-                                browsers: opts.browsers,
-                                autoprefixer: Object.assign({ flexbox: 'no-2009' }, userConfig.autoprefixer),
-                                stage: 3,
-                            }),
-                        ].concat(userConfig.extraPostCSSPlugins || []) }, userConfig.postcssLoader),
+                    publicPath: './',
+                    emit: true,
+                    esModule: true,
                 });
-                if (loader) {
-                    rule
-                        .use(loader)
-                        .loader(typeof loader === 'string' ? require.resolve(loader) : loader)
-                        .options(loaderOptions || {});
-                }
+            }
+            rule
+                .use('css-loader')
+                .loader(require.resolve('css-loader'))
+                .options({
+                importLoaders: 1,
+                esModule: true,
+                url: true,
+                import: true,
+                ...(isCSSModules
+                    ? {
+                        modules: {
+                            localIdentName: '[local]___[hash:base64:5]',
+                            ...userConfig.cssLoaderModules,
+                        },
+                    }
+                    : {}),
+                ...userConfig.cssLoader,
+            });
+            rule
+                .use('postcss-loader')
+                .loader(require.resolve('@umijs/bundler-webpack/compiled/postcss-loader'))
+                .options({
+                postcssOptions: {
+                    ident: 'postcss',
+                    plugins: [
+                        require('@umijs/bundler-webpack/compiled/postcss-flexbugs-fixes'),
+                        require('postcss-preset-env')({
+                            browsers: opts.browsers,
+                            autoprefixer: {
+                                flexbox: 'no-2009',
+                                ...userConfig.autoprefixer,
+                            },
+                            stage: 3,
+                        }),
+                    ].concat(userConfig.extraPostCSSPlugins || []),
+                    ...userConfig.postcssLoader,
+                },
+            });
+            if (loader) {
+                rule
+                    .use(loader)
+                    .loader(typeof loader === 'string' ? require.resolve(loader) : loader)
+                    .options(loaderOptions || {});
             }
         }
-    });
+    }
 }
 exports.addCSSRules = addCSSRules;