如何配置Webpack让打包模块访问外部JavaScript模块？

问题根源分析 #

你遇到的两个核心问题：

1. 导出与导入不匹配：你的constants.js用的是默认导出，但代码里尝试用命名导入{ message }，这本身就会导致找不到变量；
2. Webpack externals配置错误：原配置constants: 'module constants'不符合ES模块环境下的语法，Webpack会错误地将其解析为全局变量查找，而非保留ES模块导入语句。

分步解决方案 #

1. 修正模块导出（二选一）

如果要使用命名导入import { message } from 'constants'，修改constants.js为命名导出：

export const message = "Test message";

如果要保留默认导出，后续导入时改为：

import message from 'constants';

2. 调整Webpack配置以适配ES模块和import map

需要让Webpack输出ES模块，并正确标记constants为外部ES模块，配置如下：

module.exports = {
  output: {
    filename: '[name].js',
    // 指定输出为ES模块
    libraryTarget: 'module',
  },
  // Webpack 5+需要启用此实验特性以输出ES模块
  experiments: {
    outputModule: true,
  },
  externals: {
    // 告诉Webpack保留对constants的ES导入语句，由浏览器通过import map解析
    constants: 'imports constants',
    // 或者更明确的对象写法：
    // constants: {
    //   module: 'constants',
    // },
  },
};

3. 确保打包后的脚本以ES模块加载

在HTML中加载Webpack打包后的文件时，必须加上type="module"：

<script type="module" src="dist/app.js"></script>

原理说明 #

• 启用outputModule后，Webpack会输出标准ES模块代码，而非CommonJS；
• 正确配置externals后，Webpack不会将import { message } from 'constants'转换为全局变量访问，而是保留原始导入语句；
• 浏览器加载打包后的ES模块时，会通过你配置的importmap解析constants模块的地址，从而正确加载外部模块。

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