Material-UI配合TypeScript自定义webpack配置打包报错问题求助

核心错误原因 #

• tsconfig.json配置冲突：开启了declaration: true需要输出类型声明文件，但同时配置了noEmit: true禁止所有输出，导致TS编译环节无产物输出
• 加载器选型与配置错误：awesome-typescript-loader已停止维护，不兼容webpack5+新版本TS，且未配套babel进行语法转译
• Babel配置冗余冲突：混用了Babel7已废弃的latest/react/stage-0预设，和新版@babel/preset-env/@babel/preset-react重复，导致编译逻辑冲突

修复步骤 #

1. 替换废弃依赖 #

卸载停止维护的包，安装适配webpack5的加载器：

npm uninstall awesome-typescript-loader babel-preset-latest babel-preset-react babel-preset-stage-0
npm install -D @babel/preset-typescript ts-loader

2. 修正tsconfig.json #

删除noEmit: true配置，补充类型声明输出目录：

{
    "compilerOptions": {
        "target": "ES5",
        "lib": [
            "DOM",
            "DOM.Iterable",
            "ESNext"
        ],
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "declaration": true,
        "declarationDir": "./dist/types",
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "ESNext",
        "moduleResolution": "node",
        "isolatedModules": true,
        "jsx": "react",
    },
    "exclude": [
        "node_modules",
        "dist"
    ],
    "include": ["./src/**/*", "./custom.d.ts"]
}

3. 清理Babel配置 #

删除废弃预设，补充TS处理预设：

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react",
        "@babel/preset-typescript"
    ],
    "plugins": [
        "@babel/plugin-proposal-export-default-from"
    ]
}

4. 调整webpack配置 #

修改TS/TSX处理规则，配套babel-loader完成语法转译：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const IgnorePlugin = require('webpack').IgnorePlugin;

module.exports = {
    entry: "./src/index.tsx",
    mode: "production",
    output: {
        filename: "index.js",
        path: __dirname + "/dist",
        libraryTarget: 'umd',
        globalObject: 'this',
        clean: true // 新增：打包前自动清空dist目录
    },
    devtool: "source-map",
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
    },
    module: {
        rules: [
            {
                test: /\.ts(x?)$/,
                exclude: /node_modules/,
                use: ['babel-loader', 'ts-loader'] // 先过ts-loader做类型检查，再用babel转译
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.svg$/,
                use: [
                    {
                        loader: 'svg-url-loader',
                        options: {
                            limit: 100000
                        }
                    }
                ]
            },
            {
                enforce: "pre",
                test: /\.js$/,
                loader: "source-map-loader"
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'reactlib.css'
        }),
        new IgnorePlugin({
            resourceRegExp: /^\.\/locale$/,
            contextRegExp: /esm-es5$/
        })
    ],
    externals: {
        "react": "react",
        "react-dom": "react-dom",
        // 可选补充：如果要把mui作为外部依赖，不打包进组件库，可加以下配置
        // "@mui/material": "@mui/material",
        // "@emotion/react": "@emotion/react",
        // "@emotion/styled": "@emotion/styled"
    }
}

可选优化 #

如果不需要单独做类型检查，可以去掉ts-loader，直接用babel-loader处理TS，打包速度更快，只需要把webpack里的ts规则改成只用babel-loader，tsconfig里保留declaration: true的话单独执行tsc --emitDeclarationOnly生成类型文件即可。

内容的提问来源于stack exchange，提问作者Vicky