Webpack编译报错：缺少对应Loader处理文件类型问题求助

问题描述 #

使用Express + Node.js开发应用，通过Webpack编译时出现错误：

Uncaught Error: Module parse failed: Unexpected token (8:20). You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

错误定位在index.js第8行，曾尝试添加图片Loader但问题未解决。

错误原因及修复步骤 #

1. Webpack中Babel Loader配置错误 #

webpack.config.js里的test字段误用字符串而非正则表达式，导致Babel Loader未生效，无法解析ES6语法。

修改webpack.config.js：

module: {
    rules: [
        {
            // 将字符串 '/\.js$/' 改为正则表达式 /\.js$/
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        }
    ]
},

2. index.js中Import语法错误 #

ES6的import语句必须指定模块相对路径，不能直接写模块名。

修改index.js的import部分：

// 补充正确的相对路径和文件扩展名
import getCity from './getCity.js';
import getWeather from './getWeather.js';
import getImage from './getImage.js';
import postData from './postData.js';
import receiveData from './receiveData.js';

若想省略扩展名，可在webpack.config.js中添加resolve配置：

resolve: {
    extensions: ['.js']
}

3. getCity.js中模块导出语法错误 #

module.exports是赋值语句，不是函数调用。

修改getCity.js的导出部分：

// 将 module.exports(getCity) 改为赋值形式
module.exports = getCity;

4. 确保Babel依赖安装完整 #

若未安装Babel相关依赖，执行以下命令安装：

npm install --save-dev @babel/core babel-loader @babel/preset-env

并在项目根目录创建babel.config.json：

{
    "presets": ["@babel/preset-env"]
}

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