启用ES模块的Express项目Webpack构建报错求助

问题场景 #

使用ES模块配置（package.json包含"type": "module"）构建旧Express后端项目时，Webpack抛出以下错误：

ERROR in ./node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <!doctype html>
| <html>
| <head>

ERROR in ./node_modules/@mapbox/node-pre-gyp/lib/util/s3_setup.js 43:20-42
Module not found: Error: Can't resolve 'mock-aws-s3' in '/node_modules/@mapbox/node-pre-gyp/lib/util'

ERROR in ./node_modules/@mapbox/node-pre-gyp/lib/util/s3_setup.js 76:14-32
Module not found: Error: Can't resolve 'aws-sdk' in '/node_modules/@mapbox/node-pre-gyp/lib/util'

ERROR in ./node_modules/@mapbox/node-pre-gyp/lib/util/s3_setup.js 112:15-30
Module not found: Error: Can't resolve 'nock' in '/node_modules/@mapbox/node-pre-gyp/lib/util'

当前使用的Webpack配置文件（ES模块写法）：

import { fileURLToPath } from 'url';
import path from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  mode: 'production',
  entry: './index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: 'final.js',
  },
  target: 'node',
};

解决方案（保留ES模块配置） #

1. 修复HTML文件解析错误 #

Webpack无法处理@mapbox/node-pre-gyp中的HTML文件，需添加html-loader来解析：

• 安装依赖：

  npm install html-loader --save-dev
  

• 更新Webpack配置，添加文件解析规则：

  import { fileURLToPath } from 'url';
  import path from 'path';
  
  const __filename = fileURLToPath(import.meta.url);
  const __dirname = path.dirname(__filename);
  
  export default {
    mode: 'production',
    entry: './index.js',
    output: {
      path: path.join(__dirname, 'dist'),
      publicPath: '/',
      filename: 'final.js',
    },
    target: 'node',
    module: {
      rules: [
        {
          test: /\.html$/,
          use: ['html-loader']
        }
      ]
    }
  };
  

2. 解决依赖缺失问题 #

mock-aws-s3、aws-sdk、nock是@mapbox/node-pre-gyp的开发依赖，生产环境未默认安装，可二选一解决：

方式一：直接安装缺失依赖

将依赖添加到项目中：

npm install mock-aws-s3 aws-sdk nock --save

方式二：配置Webpack排除外部依赖

由于项目运行在Node.js环境，这些依赖可直接从node_modules加载，无需打包进最终文件，通过externals配置排除：

import { fileURLToPath } from 'url';
import path from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  mode: 'production',
  entry: './index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: 'final.js',
  },
  target: 'node',
  module: {
    rules: [
      {
        test: /\.html$/,
        use: ['html-loader']
      }
    ]
  },
  externals: {
    'mock-aws-s3': 'commonjs mock-aws-s3',
    'aws-sdk': 'commonjs aws-sdk',
    'nock': 'commonjs nock'
  }
};

额外优化（可选） #

如果s3_setup.js仅用于@mapbox/node-pre-gyp的测试场景，项目实际不会用到，可通过别名配置跳过该模块的解析：

// 在Webpack配置中添加resolve.alias字段
resolve: {
  alias: {
    './lib/util/s3_setup.js': false
  }
}

内容的提问来源于stack exchange，提问作者Guerlain BLANCHARD guerlblanch