Webpack构建Node.js应用报错Module parse failed，求解决方法

执行npx webpack时遇到以下错误：

ERROR in ./index.js 1:0
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
File was processed with these loaders:

• ./node_modules/babel-loader/lib/index.js
  You may need an additional loader to handle the result of these
  loaders.

import { startServer } from "./server";
| import _ from 'lodash';

相关文件内容如下：

webpack.config.js #

const path = require('path');

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

package.json #

{
  "name": "restapi-ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "commonjs",
  "scripts": {
    "compile": "tsc",
    "start": "npm run compile && node ./dist/index.js",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2",
    "lodash": "^4.17.21",
    "pg": "^8.10.0",
    "pgtools": "^0.1.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.21.0",
    "@babel/core": "^7.21.4",
    "@babel/node": "^7.20.7",
    "@babel/preset-env": "^7.21.4",
    "@types/express": "^4.17.17",
    "@types/pg": "^8.6.6",
    "babel-loader": "^9.1.2",
    "typescript": "^4.9.5",
    "webpack": "^5.77.0",
    "webpack-cli": "^5.0.1"
  }
}

server.ts #

import express from 'express';
import Route from './src/routes'

const bodyParser = require('body-parser');

const app = express();

// Parse JSON data
app.use(bodyParser.json());

//app.use(express.json());


 app.get("/", (req, res) => {
    res.send("Hi World");
});



app.use("/api/v1/order", Route);



// Start the server

export function startServer()
{
  app.listen(3000, () => {
    console.log('Server started on port 3000');
  });
}

index.js #

import { startServer } from "./server";
//const { startServer } = require("./server");
import _ from 'lodash';

startServer();

1. 统一模块语法，修正package.json配置 #

项目同时混用ES模块（import/export）和CommonJS（require）语法，且package.json设置了"type": "commonjs"，导致Webpack解析ES语法时冲突。

修改package.json的模块类型：

{
  // 其他配置不变
  "type": "module",
  // 其他配置不变
}

同时将server.ts里的CommonJS语法替换为ES模块：

import express from 'express';
import Route from './src/routes';
import bodyParser from 'body-parser'; // 替换原require语句

2. 配置Webpack处理TypeScript文件 #

当前Webpack仅处理.js文件，无法识别项目中的.ts文件，需添加TypeScript支持：

首先安装Babel的TypeScript预设：

npm install --save-dev @babel/preset-typescript

然后修改webpack.config.js，添加.ts文件处理规则：

const path = require('path');

module.exports = {
  mode: 'production',
  target: 'node',
  entry: './index.js',
  resolve: {
    extensions: ['.js', '.ts'], // 让Webpack自动解析.ts扩展名
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|ts)$/, // 同时处理js和ts文件
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets:  [
              ['@babel/preset-env', { targets: { node: 'current' } }], // 指定目标Node版本，确保转译兼容性
              '@babel/preset-typescript' // 添加TypeScript转译支持
            ],
          },
        },
      },
    ],
  },
};

3. 调整文件引用路径 #

保持index.js为入口时，确保引用的./server指向正确文件。由于已配置解析.ts扩展名，可直接引用：

import { startServer } from "./server";

4. 补充TypeScript配置（可选） #

若未创建tsconfig.json，建议添加以下配置确保TypeScript编译与项目模块规则一致：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["*.ts", "src/**/*.ts"]
}

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