如何在Webpack中忽略.tsx文件？配置无效求助

你的当前配置里，把/\.tsx$/写在ts-loader规则的exclude里是无效的——因为这个规则的test只匹配.ts文件，本来就不会处理.tsx，所以这行配置等于没加。要真正让Webpack忽略.tsx文件，按以下方案处理：

方案1：用IgnorePlugin完全忽略.tsx文件 #

这个插件会让Webpack直接跳过所有.tsx文件的解析和打包，适合完全不想让这类文件出现在bundle里的场景。

修改Webpack配置，添加插件：

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: path.resolve(__dirname, 'src') + '/main.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js',
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            configFile: 'tsconfig.webpack.json',
                        },
                    },
                ],
                exclude: [/node_modules/], // 移除无效的/\.tsx$/规则
            },
        ],
    },
    plugins: [
        // 添加忽略插件
        new webpack.IgnorePlugin({
            resourceRegExp: /\.tsx$/
        })
    ],
    mode: 'development',
    resolve: {
        extensions: ['.js', '.ts'],
    },
    devtool: false,
};

方案2：用空loader处理.tsx文件（避免导入报错） #

如果代码里不小心导入了.tsx文件，想让Webpack不尝试编译它，可以添加专门的规则用null-loader处理：

module.exports = {
    // ...其他配置
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            configFile: 'tsconfig.webpack.json',
                        },
                    },
                ],
                exclude: [/node_modules/],
            },
            // 添加规则，对.tsx文件不做任何编译
            {
                test: /\.tsx$/,
                use: 'null-loader'
            }
        ],
    },
    // ...其他配置
};

注意：使用该方案需先安装依赖：npm install null-loader --save-dev

额外检查 #

确认tsconfig.webpack.json的include数组未包含.tsx文件，避免TypeScript编译器尝试编译它们：

{
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

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