@umijs/bundler-webpack 4.0.0-beta.9 → 4.0.0-rc.3

package/dist/config/config.d.ts

@@ -1,11 +1,12 @@
 import { Configuration } from '../../compiled/webpack';
 import { Env, IConfig } from '../types';
-interface IOpts {
+export interface IOpts {
     cwd: string;
     env: Env;
     entry: Record<string, string>;
     extraBabelPresets?: any[];
     extraBabelPlugins?: any[];
+    extraEsbuildLoaderHandler?: any[];
     babelPreset?: any;
     chainWebpack?: Function;
     modifyWebpackConfig?: Function;
@@ -15,6 +16,10 @@ interface IOpts {
     userConfig: IConfig;
     analyze?: any;
     name?: string;
+    cache?: {
+        absNodeModulesPath?: string;
+        buildDependencies?: string[];
+        cacheDirectory?: string;
+    };
 }
 export declare function getConfig(opts: IOpts): Promise<Configuration>;
-export {};

package/dist/config/config.js

@@ -17,6 +17,7 @@ const path_1 = require("path");
 const webpack_1 = __importDefault(require("../../compiled/webpack"));
 const webpack_5_chain_1 = __importDefault(require("../../compiled/webpack-5-chain"));
 const constants_1 = require("../constants");
+const RuntimePublicPathPlugin_1 = require("../plugins/RuntimePublicPathPlugin");
 const types_1 = require("../types");
 const browsersList_1 = require("../utils/browsersList");
 const assetRules_1 = require("./assetRules");
@@ -25,9 +26,13 @@ const compressPlugin_1 = require("./compressPlugin");
 const copyPlugin_1 = require("./copyPlugin");
 const cssRules_1 = require("./cssRules");
 const definePlugin_1 = require("./definePlugin");
+const detectDeadCodePlugin_1 = require("./detectDeadCodePlugin");
 const fastRefreshPlugin_1 = require("./fastRefreshPlugin");
+const forkTSCheckerPlugin_1 = require("./forkTSCheckerPlugin");
+const harmonyLinkingErrorPlugin_1 = require("./harmonyLinkingErrorPlugin");
 const ignorePlugin_1 = require("./ignorePlugin");
 const javaScriptRules_1 = require("./javaScriptRules");
+const manifestPlugin_1 = require("./manifestPlugin");
 const miniCSSExtractPlugin_1 = require("./miniCSSExtractPlugin");
 const nodePolyfill_1 = require("./nodePolyfill");
 const progressPlugin_1 = require("./progressPlugin");
@@ -38,9 +43,8 @@ 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 || {
-            chrome: 80,
-        };
+        userConfig.targets || (userConfig.targets = constants_1.DEFAULT_BROWSER_TARGETS);
+        const useHash = !!(opts.hash || (userConfig.hash && !isDev));
         const applyOpts = {
             name: opts.name,
             config,
@@ -50,9 +54,11 @@ function getConfig(opts) {
             babelPreset: opts.babelPreset,
             extraBabelPlugins: opts.extraBabelPlugins || [],
             extraBabelPresets: opts.extraBabelPresets || [],
+            extraEsbuildLoaderHandler: opts.extraEsbuildLoaderHandler || [],
             browsers: (0, browsersList_1.getBrowsersList)({
                 targets: userConfig.targets,
             }),
+            useHash,
             staticPathPrefix: opts.staticPathPrefix !== undefined ? opts.staticPathPrefix : 'static/',
         };
         // mode
@@ -61,7 +67,6 @@ function getConfig(opts) {
         // entry
         Object.keys(opts.entry).forEach((key) => {
             const entry = config.entry(key);
-            // TODO: runtimePublicPath
             if (isDev && opts.hmr) {
                 entry.add(require.resolve('../../client/client/client'));
             }
@@ -75,7 +80,6 @@ function getConfig(opts) {
             : userConfig.devtool);
         // output
         const absOutputPath = (0, path_1.join)(opts.cwd, userConfig.outputPath || constants_1.DEFAULT_OUTPUT_PATH);
-        const useHash = opts.hash || (userConfig.hash && !isDev);
         const disableCompress = process.env.COMPRESS === 'none';
         config.output
             .path(absOutputPath)
@@ -131,10 +135,14 @@ function getConfig(opts) {
         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);
-        // TODO: friendly-error
-        // TODO: manifest
+        // manifest
+        yield (0, manifestPlugin_1.addManifestPlugin)(applyOpts);
         // hmr
         if (isDev && opts.hmr) {
             config.plugin('hmr').use(webpack_1.default.HotModuleReplacementPlugin);
@@ -143,6 +151,40 @@ function getConfig(opts) {
         yield (0, compressPlugin_1.addCompressPlugin)(applyOpts);
         // purgecss
         // await applyPurgeCSSWebpackPlugin(applyOpts);
+        // handle HarmonyLinkingError
+        yield (0, harmonyLinkingErrorPlugin_1.addHarmonyLinkingErrorPlugin)(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 ||
+                    (0, path_1.join)(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.cwd, 'node_modules'),
+                    ],
+                });
+            }
+            config.infrastructureLogging(Object.assign({ level: 'error' }, (process.env.WEBPACK_FS_CACHE_DEBUG
+                ? {
+                    debug: /webpack\.cache/,
+                }
+                : {})));
+        }
         // analyzer
         if (opts.analyze) {
             yield (0, bundleAnalyzerPlugin_1.addBundleAnalyzerPlugin)(applyOpts);

package/dist/config/cssRules.js

@@ -56,7 +56,7 @@ function addCSSRules(opts) {
                 }
                 else {
                     rule
-                        .use('mini-css-extract-plugin-loader')
+                        .use('mini-css-extract-plugin')
                         .loader(require.resolve('@umijs/bundler-webpack/compiled/mini-css-extract-plugin/loader'))
                         .options({
                         publicPath: './',

package/dist/config/detectDeadCode.d.ts

@@ -0,0 +1,12 @@
+import { Compilation } from '@umijs/bundler-webpack/compiled/webpack';
+import { DeadCodeParams } from '../types';
+export interface Options extends DeadCodeParams {
+    patterns: string[];
+    exclude: string[];
+    failOnHint: boolean;
+    detectUnusedFiles: boolean;
+    detectUnusedExport: boolean;
+}
+export declare const disabledFolders: string[];
+declare const detectDeadCode: (compilation: Compilation, options: Options) => void;
+export default detectDeadCode;

package/dist/config/detectDeadCode.js

@@ -0,0 +1,120 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.disabledFolders = void 0;
+const webpack_1 = require("@umijs/bundler-webpack/compiled/webpack");
+const utils_1 = require("@umijs/utils");
+const path_1 = __importDefault(require("path"));
+exports.disabledFolders = [
+    'node_modules',
+    '.umi',
+    '.umi-production',
+    'dist',
+];
+const detectDeadCode = (compilation, options) => {
+    const assets = getWebpackAssets(compilation);
+    const compiledFilesDictionary = convertFilesToDict(assets);
+    const includedFiles = getPattern(options)
+        .map((pattern) => utils_1.glob.sync(pattern))
+        .flat();
+    const unusedFiles = options.detectUnusedFiles
+        ? includedFiles.filter((file) => !compiledFilesDictionary[file])
+        : [];
+    const unusedExportMap = options.detectUnusedExport
+        ? getUnusedExportMap(convertFilesToDict(includedFiles), compilation)
+        : {};
+    logUnusedFiles(unusedFiles);
+    logUnusedExportMap(unusedExportMap);
+    const hasUnusedThings = unusedFiles.length || Object.keys(unusedExportMap).length;
+    if (hasUnusedThings && options.failOnHint) {
+        process.exit(2);
+    }
+};
+const getPattern = (options) => {
+    return options.patterns
+        .map((pattern) => path_1.default.resolve(options.context || '', pattern))
+        .concat(options.exclude.map((pattern) => path_1.default.resolve(options.context || '', `!${pattern}`)))
+        .map(convertToUnixPath);
+};
+const getUnusedExportMap = (includedFileMap, compilation) => {
+    const unusedExportMap = {};
+    compilation.chunks.forEach((chunk) => {
+        compilation.chunkGraph.getChunkModules(chunk).forEach((module) => {
+            outputUnusedExportMap(compilation, chunk, module, includedFileMap, unusedExportMap);
+        });
+    });
+    return unusedExportMap;
+};
+const outputUnusedExportMap = (compilation, chunk, module, includedFileMap, unusedExportMap) => {
+    if (!(module instanceof webpack_1.NormalModule) || !module.resource) {
+        return;
+    }
+    const path = convertToUnixPath(module.resource);
+    if (!/^((?!(node_modules)).)*$/.test(path))
+        return;
+    const providedExports = compilation.chunkGraph.moduleGraph.getProvidedExports(module);
+    const usedExports = compilation.chunkGraph.moduleGraph.getUsedExports(module, chunk.runtime);
+    if (usedExports !== true &&
+        providedExports !== true &&
+        includedFileMap[path]) {
+        if (usedExports === false) {
+            if (providedExports === null || providedExports === void 0 ? void 0 : providedExports.length) {
+                unusedExportMap[path] = providedExports;
+            }
+        }
+        else if (providedExports instanceof Array) {
+            const unusedExports = providedExports.filter((item) => usedExports && !usedExports.has(item));
+            if (unusedExports.length) {
+                unusedExportMap[path] = unusedExports;
+            }
+        }
+    }
+};
+const logUnusedExportMap = (unusedExportMap) => {
+    if (!Object.keys(unusedExportMap).length) {
+        return;
+    }
+    let numberOfUnusedExport = 0;
+    let logStr = '';
+    Object.keys(unusedExportMap).forEach((filePath, fileIndex) => {
+        const unusedExports = unusedExportMap[filePath];
+        logStr += [
+            `\n${fileIndex + 1}. `,
+            utils_1.chalk.yellow(`${filePath}\n`),
+            '    >>>  ',
+            utils_1.chalk.yellow(`${unusedExports.join(',  ')}`),
+        ].join('');
+        numberOfUnusedExport += unusedExports.length;
+    });
+    console.log(utils_1.chalk.yellow.bold('\nWarning:'), utils_1.chalk.yellow(`There are ${numberOfUnusedExport} unused exports in ${Object.keys(unusedExportMap).length} files:`), logStr, utils_1.chalk.red.bold('\nPlease be careful if you want to remove them (¬º-°)¬.\n'));
+};
+const getWebpackAssets = (compilation) => {
+    const outputPath = compilation.getPath(compilation.compiler.outputPath);
+    const assets = [
+        ...Array.from(compilation.fileDependencies),
+        ...compilation
+            .getAssets()
+            .map((asset) => path_1.default.join(outputPath, asset.name)),
+    ];
+    return assets;
+};
+const convertFilesToDict = (assets) => {
+    return assets
+        .filter((file) => Boolean(file) &&
+        exports.disabledFolders.every((disabledPath) => !file.includes(disabledPath)))
+        .reduce((fileDictionary, file) => {
+        const unixFile = convertToUnixPath(file);
+        fileDictionary[unixFile] = true;
+        return fileDictionary;
+    }, {});
+};
+const logUnusedFiles = (unusedFiles) => {
+    if (!(unusedFiles === null || unusedFiles === void 0 ? void 0 : unusedFiles.length)) {
+        return;
+    }
+    console.log(utils_1.chalk.yellow.bold('\nWarning:'), utils_1.chalk.yellow(`There are ${unusedFiles.length} unused files:\n`), ...unusedFiles.map((file, index) => `${index + 1}. ${utils_1.chalk.yellow(file)}\n`), utils_1.chalk.red.bold('Please be careful if you want to remove them (¬º-°)¬.\n'));
+};
+const convertToUnixPath = (path) => path.replace(/\\+/g, '/');
+exports.default = detectDeadCode;

package/dist/config/detectDeadCodePlugin.d.ts

@@ -0,0 +1,9 @@
+import Config from '@umijs/bundler-webpack/compiled/webpack-5-chain';
+import { Env, IConfig } from '../types';
+interface IOpts {
+    userConfig: IConfig;
+    config: Config;
+    env: Env;
+}
+export declare function addDetectDeadCodePlugin(opts: IOpts): Promise<void>;
+export {};

package/dist/config/detectDeadCodePlugin.js

@@ -0,0 +1,71 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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.addDetectDeadCodePlugin = void 0;
+const types_1 = require("../types");
+const detectDeadCode_1 = __importStar(require("./detectDeadCode"));
+const defaultOptions = {
+    patterns: [`!(${detectDeadCode_1.disabledFolders.join('|')})/**/*.*`],
+    exclude: [],
+    failOnHint: false,
+    detectUnusedFiles: true,
+    detectUnusedExport: true,
+};
+class DetectDeadCodePlugin {
+    constructor(options) {
+        this.options = defaultOptions;
+        this.handleAfterEmit = (compilation, callback) => {
+            (0, detectDeadCode_1.default)(compilation, this.options);
+            callback();
+        };
+        if (!options) {
+            return;
+        }
+        this.options = Object.assign(Object.assign({}, this.options), options);
+    }
+    apply(compiler) {
+        if (!this.options.context) {
+            this.options = Object.assign(Object.assign({}, this.options), { context: compiler.context });
+        }
+        compiler.hooks.afterEmit.tapAsync('DetectDeadCodePlugin', this.handleAfterEmit);
+    }
+}
+function addDetectDeadCodePlugin(opts) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const { config, userConfig } = opts;
+        const isDev = opts.env === types_1.Env.development;
+        if (userConfig.deadCode && !isDev) {
+            config
+                .plugin('detect-dead-code-plugin')
+                .use(DetectDeadCodePlugin, [userConfig.deadCode]);
+        }
+    });
+}
+exports.addDetectDeadCodePlugin = addDetectDeadCodePlugin;

package/dist/config/forkTSCheckerPlugin.d.ts

@@ -0,0 +1,11 @@
+import Config from '@umijs/bundler-webpack/compiled/webpack-5-chain';
+import { Env, IConfig } from '../types';
+interface IOpts {
+    name?: string;
+    config: Config;
+    userConfig: IConfig;
+    cwd: string;
+    env: Env;
+}
+export declare function addForkTSCheckerPlugin(opts: IOpts): Promise<void>;
+export {};

package/dist/config/forkTSCheckerPlugin.js

@@ -0,0 +1,34 @@
+"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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addForkTSCheckerPlugin = void 0;
+// @ts-ignore
+const fork_ts_checker_webpack_plugin_1 = __importDefault(require("@umijs/bundler-webpack/compiled/fork-ts-checker-webpack-plugin"));
+function addForkTSCheckerPlugin(opts) {
+    var _a;
+    return __awaiter(this, void 0, void 0, function* () {
+        const { config, userConfig } = opts;
+        if (userConfig.forkTSChecker) {
+            // use user's typescript
+            if ((_a = userConfig.forkTSChecker.typescript) === null || _a === void 0 ? void 0 : _a.enable) {
+                userConfig.forkTSChecker.typescript.typescriptPath =
+                    require.resolve('typescript');
+            }
+            config
+                .plugin('fork-ts-checker-plugin')
+                .use(fork_ts_checker_webpack_plugin_1.default, [userConfig.forkTSChecker]);
+        }
+    });
+}
+exports.addForkTSCheckerPlugin = addForkTSCheckerPlugin;

package/dist/config/harmonyLinkingErrorPlugin.d.ts

@@ -0,0 +1,6 @@
+import Config from '@umijs/bundler-webpack/compiled/webpack-5-chain';
+interface IOpts {
+    config: Config;
+}
+export declare function addHarmonyLinkingErrorPlugin(opts: IOpts): Promise<void>;
+export {};

package/dist/config/harmonyLinkingErrorPlugin.js

@@ -0,0 +1,42 @@
+"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.addHarmonyLinkingErrorPlugin = void 0;
+// ref: https://github.com/webpack/webpack/blob/ccecc17c01af96edddb931a76e7a3b21ef2969d8/lib/dependencies/HarmonyImportDependency.js#L164
+const LINKING_ERROR_TAG = 'was not found in';
+// build 时会出现 css modules 的引用警告，但这应该是需要忽略的
+const CSS_NO_EXPORTS = /\.(css|sass|scss|styl|less)' \(module has no exports\)/;
+class HarmonyLinkingErrorPlugin {
+    apply(compiler) {
+        compiler.hooks.afterCompile.tap('HarmonyLinkingErrorPlugin', (compilation) => {
+            if (!compilation.warnings.length) {
+                return;
+            }
+            const harmonyLinkingErrors = compilation.warnings.filter((w) => {
+                return (w.name === 'ModuleDependencyWarning' &&
+                    !w.module.resource.includes('node_modules') &&
+                    w.message.includes(LINKING_ERROR_TAG) &&
+                    !CSS_NO_EXPORTS.test(w.message));
+            });
+            if (!harmonyLinkingErrors.length) {
+                return;
+            }
+            compilation.errors.push(...harmonyLinkingErrors);
+        });
+    }
+}
+function addHarmonyLinkingErrorPlugin(opts) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const { config } = opts;
+        config.plugin('harmony-linking-error-plugin').use(HarmonyLinkingErrorPlugin);
+    });
+}
+exports.addHarmonyLinkingErrorPlugin = addHarmonyLinkingErrorPlugin;

package/dist/config/javaScriptRules.d.ts

@@ -7,6 +7,7 @@ interface IOpts {
     env: Env;
     extraBabelPlugins: any[];
     extraBabelPresets: any[];
+    extraEsbuildLoaderHandler: any[];
     babelPreset: any;
     name?: string;
 }

package/dist/config/javaScriptRules.js

@@ -13,14 +13,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addJavaScriptRules = void 0;
+const mfsu_1 = require("@umijs/mfsu");
 const utils_1 = require("@umijs/utils");
+const webpack_1 = require("../../compiled/webpack");
 const constants_1 = require("../constants");
 const autoCSSModules_1 = __importDefault(require("../swcPlugins/autoCSSModules"));
 const types_1 = require("../types");
 const depMatch_1 = require("../utils/depMatch");
 function addJavaScriptRules(opts) {
+    var _a, _b;
     return __awaiter(this, void 0, void 0, function* () {
-        const { config, userConfig, cwd, env, name } = opts;
+        const { config, userConfig, cwd, name } = opts;
         const isDev = opts.env === types_1.Env.development;
         const useFastRefresh = isDev && userConfig.fastRefresh !== false && name !== constants_1.MFSU_NAME;
         const depPkgs = Object.assign({}, (0, depMatch_1.es5ImcompatibleVersionsToPkg)());
@@ -54,6 +57,9 @@ function addJavaScriptRules(opts) {
             })
                 .end(),
         ];
+        if (userConfig.mdx) {
+            srcRules.push(config.module.rule('markdown').test(/\.mdx?$/));
+        }
         const depRules = [
             config.module
                 .rule('dep')
@@ -112,35 +118,40 @@ function addJavaScriptRules(opts) {
                 });
             }
             else if (srcTranspiler === types_1.Transpiler.swc) {
-                // TODO: support javascript
                 rule
                     .use('swc-loader')
-                    .loader(require.resolve('../../compiled/swc-loader'))
+                    .loader(require.resolve('../loader/swc'))
                     .options({
-                    jsc: {
-                        parser: {
-                            syntax: 'typescript',
-                            dynamicImport: true,
-                            tsx: true,
-                        },
-                        transform: {
-                            react: {
-                                runtime: 'automatic',
-                                pragma: 'React.createElement',
-                                pragmaFrag: 'React.Fragment',
-                                throwIfNamespace: true,
-                                development: env === types_1.Env.development,
-                                useBuiltins: true,
-                            },
-                        },
-                    },
                     plugin: (m) => new autoCSSModules_1.default().visitProgram(m),
                 });
             }
+            else if (srcTranspiler === types_1.Transpiler.esbuild) {
+                rule
+                    .use('esbuild-loader')
+                    .loader(mfsu_1.esbuildLoader)
+                    .options({
+                    target: isDev ? 'esnext' : 'es2015',
+                    handler: [mfsu_1.autoCssModulesHandler, ...opts.extraEsbuildLoaderHandler],
+                });
+                // esbuild loader can not auto import `React`
+                config.plugin('react-provide-plugin').use(webpack_1.ProvidePlugin, [
+                    {
+                        React: 'react',
+                    },
+                ]);
+            }
             else {
                 throw new Error(`Unsupported srcTranspiler ${srcTranspiler}.`);
             }
         });
+        if (userConfig.mdx) {
+            config.module
+                .rule('mdx')
+                .test(/\.mdx?$/)
+                .use('mdx-loader')
+                .loader((_a = userConfig.mdx) === null || _a === void 0 ? void 0 : _a.loader)
+                .options((_b = userConfig.mdx) === null || _b === void 0 ? void 0 : _b.loaderOptions);
+        }
         const depTranspiler = userConfig.depTranspiler || types_1.Transpiler.none;
         depRules.forEach((_rule) => {
             if (depTranspiler === types_1.Transpiler.none) {

package/dist/config/manifestPlugin.d.ts

@@ -0,0 +1,11 @@
+import Config from '@umijs/bundler-webpack/compiled/webpack-5-chain';
+import { Env, IConfig } from '../types';
+interface IOpts {
+    name?: string;
+    config: Config;
+    userConfig: IConfig;
+    cwd: string;
+    env: Env;
+}
+export declare function addManifestPlugin(opts: IOpts): Promise<void>;
+export {};

package/dist/config/manifestPlugin.js

@@ -0,0 +1,25 @@
+"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.addManifestPlugin = void 0;
+// @ts-ignore
+const webpack_manifest_plugin_1 = require("@umijs/bundler-webpack/compiled/webpack-manifest-plugin");
+function addManifestPlugin(opts) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const { config, userConfig } = opts;
+        if (userConfig.manifest) {
+            config.plugin('manifest-plugin').use(webpack_manifest_plugin_1.WebpackManifestPlugin, [
+                Object.assign({ fileName: 'asset-manifest.json' }, userConfig.manifest),
+            ]);
+        }
+    });
+}
+exports.addManifestPlugin = addManifestPlugin;

package/dist/config/miniCSSExtractPlugin.d.ts

@@ -5,6 +5,7 @@ interface IOpts {
     userConfig: IConfig;
     cwd: string;
     env: Env;
+    useHash: boolean;
 }
 export declare function addMiniCSSExtractPlugin(opts: IOpts): Promise<void>;
 export {};

package/dist/config/miniCSSExtractPlugin.js

@@ -15,11 +15,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addMiniCSSExtractPlugin = void 0;
 // @ts-ignore
 const mini_css_extract_plugin_1 = __importDefault(require("@umijs/bundler-webpack/compiled/mini-css-extract-plugin"));
-const types_1 = require("../types");
 function addMiniCSSExtractPlugin(opts) {
     return __awaiter(this, void 0, void 0, function* () {
-        const { config, userConfig, env } = opts;
-        const hash = env !== types_1.Env.development && userConfig.hash ? '.[contenthash:8]' : '';
+        const { config, userConfig, useHash } = opts;
+        const hash = useHash ? '.[contenthash:8]' : '';
         if (!userConfig.styleLoader) {
             config.plugin('mini-css-extract-plugin').use(mini_css_extract_plugin_1.default, [
                 {

package/dist/config/svgRules.d.ts

@@ -6,6 +6,7 @@ interface IOpts {
     cwd: string;
     env: Env;
     browsers: any;
+    staticPathPrefix: string;
 }
 export declare function addSVGRules(opts: IOpts): Promise<void>;
 export {};