执行webpack serve命令构建React项目时出现babel-loader等模块缺失报错

问题根源 #

项目存储路径包含特殊字符#，Webpack 路径解析时会将#识别为 URL 哈希标识符截断路径，导致无法正确定位 node_modules 下的依赖文件，是触发两个报错的主要原因。

解决步骤 #

• 调整项目存储路径，将路径中带#的文件夹重命名去掉#，比如将#discorddev改为discorddev
• 删除项目根目录下的node_modules文件夹、package-lock.json（或yarn.lock）文件，重新执行npm install安装依赖，修复之前路径异常导致的依赖损坏问题
• 补充完善webpack.config.js配置，Webpack 5 需明确配置静态资源目录、插件、扩展名解析规则，修改后参考配置如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.bundle.js',
        clean: true
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json']
    },
    module: {
        rules: [
            {
                test: /\.m?(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            "@babel/preset-env",
                            "@babel/preset-react"
                        ]
                    }
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'public/index.html')
        })
    ],
    devServer: {
        static: path.resolve(__dirname, 'public'),
        port: 3030,
        liveReload: true,
        hot: true
    },
}

• 安装缺失的style-loader依赖，执行命令：npm i style-loader -D
• 在项目根目录新建public文件夹，在文件夹内新建index.html作为页面模板，内容参考：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CBG服务状态页</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

• 修复index.js中的语法错误，将document.getElementsByTag('root')[0]改为document.getElementById('root')，修改后代码参考：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {App} from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

所有修改完成后执行npm run dev即可正常启动项目。

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