为什么我配置的React项目加载不出来?

Question

如题。在使用Webpack手配了一个React项目后却加载不出来，浏览器一直是“正在加载”的状态而显示不出来我要的内容。求各位大神看看我的配置哪里出了问题

下面是我的配置：

// webpack.config.js
const path = require('path');
const EslintWebpackPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const { getStyleLoaders } = require('./funcs/GetLoaders.js');

module.exports = {
    entry: './src/index.tsx',
    output: {
        path: undefined,
        filename: 'static/js/[name].js',
        chunkFilename: 'static/js/[name].chunk.js',
        assetModuleFilename: 'static/media/[hash:10][ext][query]',
    },
    module: {
        // 处理CSS
        rules: [
            {
                test: /\.css$/,
                use: getStyleLoaders(),
            },
            {
                test: /\.less$/,
                use: getStyleLoaders('less-loader'),
            },
            // 处理图片
            {
                test: /\.(jpe?g|png|gif|bmp|webp|svg)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024,
                    }
                }
            },
            // 处理其他资源
            {
                test: /\.(woff2|ttf)$/,
                type: 'asset/resource',
            },
            // 处理js
            {
                test: /\.jsx?$/,
                use: ['babel-loader'],
                include: path.resolve(__dirname, '../src'),
                exclude: /node_modules/,
                options: {
                    cacheDirectory: true,
                    cacheCompression: false,
                }
            },
            // 处理ts
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            transpileOnly: true,
                        },
                    },
                ],
            }
        ],
    },
    plugins: [
        new EslintWebpackPlugin({
            context: path.resolve(__dirname, '../src'),
            exclude: 'node_modules',
            cache: true,
            cacheLocation: path.resolve(__dirname, '../node_modules/.cache/.eslintcache')
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../public/index.htm'),
            filename: 'index.htm'
        }),
    ],
    mode: 'development',
    devtool: 'cheap-module-source-map',
    optimization: {
        splitChunks: {
            chunks: 'all',
        },
        runtimeChunk: {
            name: entrypoint => `runtime~${entrypoint.name}.js`,
        }
    },
    devServer: {
        port: 4155,
        open: true,
        host: 'localhost',
        hot: true,
        historyApiFallback: true,
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, '../src'),
        },
        extensions: [
            '.tsx',
            '.ts',
            '.jsx',
            '.js',
            '.json',
            '.vue'
        ],
    },
};

// GetLoaders.js
const getStyleLoaders = (loaderUsed = '') => [
    'style-loader',
    'css-loader',
    {
        loader: 'postcss-loader',
        options: {
            postcssOptions: {
                plugins: [
                    'postcss-preset-env',
                    ['autoprefixer', {
                        browsers: ['Android >= 4.0', 'iOS >= 7']
                    }],
                    ['postcss-pxtorem', {
                        rootValue: 16,
                        propList: ['*']
                    }],
                ]
            } ,
        },
    },
    loaderUsed,
].filter(loader => !!loader);

module.exports = {
    getStyleLoaders,
};

Answer 1

看一下控制台输出？应该会有有异常抛出。打不开控制台，也可以先开启控制台再进入项目页面。或者使用 Shift+ES 的快捷键看看项目的内存和CPU使用率。

如果还是看不到，可以尝试使用 Firefox 我记得里面是可以看到死循环的提示及错误定位的。Chrome 暂时好像没看到这个功能。