Webpack无法解析JavaScript代码，报意外字符错误求助

云原生阿岚

2026-7-23

Webpack构建报错：SyntaxError: Unexpected character '�' (1:0)

问题重现

执行npm run build时触发错误：

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js)
SyntaxError: C:\Users\bradr\OneDrive\Desktop\repos\weather-app\src\index.js: Unexpected character '�'. (1:0)

涉及的关键文件代码：
index.js

import { heythere } from "./generateJoke";

console.log(123);

webpack.config.js

const path = require("path");

module.exports = {
  entry: "/src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
};

解决方案

按以下步骤逐一排查：

修正Webpack Entry路径
当前配置里的entry: "/src/index.js"是系统绝对路径，Webpack会从磁盘根目录寻找文件，而非项目根目录。改成相对路径：
```
entry: "./src/index.js"
```
检查文件编码格式
用编辑器打开src/index.js，确认编码为UTF-8（无BOM）。带BOM头的UTF-8文件会让Babel解析时识别出不可见特殊字符，引发报错。以VS Code为例：点击右下角编码选项，选择"通过编码保存"，再选"UTF-8"。
确认Babel依赖完整
确保安装了所有必需的Babel包，执行命令：
```
npm install --save-dev babel-loader @babel/core @babel/preset-env
```
缺少@babel/core会导致babel-loader无法正常工作，触发解析异常。
校验导入文件的有效性
确认src/generateJoke.js存在，且导出语法正确，示例：
```
export const heythere = () => {
  return "Hello there!";
};
```
若该文件缺失或语法错误，也会传递错误的解析信息。