Webpack运行时出现Invalid regular expression flags语法错误求助

环境信息 #

• Webpack 5
• Node v18.12.1
• Backbone.js

问题现象 #

尝试用Webpack打包Express.js/Backbone.js的客户端/服务端网站，执行npm start时出现正则语法错误，错误日志如下：

[24/02/18| 9:42PM] ➜ project git:(master) ✗ $ npm start

project-manager@0.0.0 start
node ./dist/main.js

/Users/user/Documents/dir/project/dist/main.js:28830
/Users/user/Documents/dir/project/node_modules/.bin/webpack = webpack_require(4523);
^

SyntaxError: Invalid regular expression flags
at Object.compileFunction (node:vm:360:18)
at wrapSafe (node:internal/modules/cjs/loader:1088:15)
at Module._compile (node:internal/modules/cjs/loader:1123:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
at Module.load (node:internal/modules/cjs/loader:1037:32)
at Module._load (node:internal/modules/cjs/loader:878:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:23:47

排查方向与解决方案 #

1. 核心问题定位 #

错误行里的/Users/user/Documents/dir/project/node_modules/.bin/webpack被Node当成了正则表达式（因开头是/），但后续内容不符合正则语法，导致报错。本质是客户端与服务端代码混打包引发的解析冲突：你把服务端入口./src/start-services.js和客户端入口./src/main.js放在同一个entry中，且设置target: 'web'（浏览器环境），但服务端Express代码依赖Node.js专属API，无法用浏览器环境的配置打包。

2. 关键配置修正 #

拆分客户端与服务端打包配置

创建两个独立的Webpack配置文件，分别处理两类代码：

• 客户端配置：保持target: 'web'，入口为./src/main.js，保留HtmlWebpackPlugin等浏览器相关插件。
• 服务端配置：设置target: 'node'，入口为./src/start-services.js，禁用HtmlWebpackPlugin，同时在output中添加libraryTarget: 'commonjs2'，确保Node能正确加载打包后的服务端代码。

清理resolve.fallback重复配置

你的fallback字段中重复设置了os: false和path: false，这会导致模块解析混乱，保留一份即可。

跳过Node核心模块打包

服务端配置中，通过externals字段让Webpack跳过Node核心模块（如fs、net、http等）的打包，直接使用Node环境自带模块，示例：

// 需先安装webpack-node-externals包
const nodeExternals = require('webpack-node-externals');

module.exports = {
  // ...其他配置
  externals: [nodeExternals()]
}

修正环境判断逻辑

当前代码中const isProduction = process.env.NODE_ENV == 'development';逻辑反向，应改为：

const isProduction = process.env.NODE_ENV === 'production';

3. 示例服务端Webpack配置片段 #

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  target: 'node',
  entry: './src/start-services.js',
  output: {
    filename: 'server.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'commonjs2'
  },
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.(?:js|mjs|cjs)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', { targets: { node: '18' } }]]
          }
        }
      }
    ]
  }
};

4. 调整npm脚本 #

修改package.json中的start脚本，先分别打包客户端和服务端，再启动服务端：

"scripts": {
  "build:client": "webpack --config webpack.client.js",
  "build:server": "webpack --config webpack.server.js",
  "build": "npm run build:client && npm run build:server",
  "start": "npm run build && node ./dist/server.js"
}

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