Webpack导入含import的常量文件报错：模块外无法使用import

方案1：将常量文件改为CommonJS语法 #

直接把constantes.js的ES模块语法替换为Node.js原生支持的CommonJS语法，让require能正常解析：

// 修改后的 constantes.js
const angular = require('angular'); // 替换 import 为 require
const token = 'your-token-value'; // 定义常量

// 导出常量
module.exports = { token };

修改后，webpack.config.js里的require导入就能正常运行，不会再触发语法错误。

方案2：统一使用ES模块模式 #

保留常量文件的ES语法，同时让Node.js以ES模块模式处理配置文件：

1. 在项目根目录的package.json中添加：

{
  "type": "module"
}

2. 将webpack.config.js改为ES模块语法：

// 修改后的 webpack.config.js
import { token } from './constantes.js';
// 其余webpack配置代码...

3. 注意：若webpack版本较低，需将配置文件名改为webpack.config.mjs才能被正确识别。

方案3：用Babel转译ES模块后导入 #

通过@babel/register在运行webpack时自动转译ES模块语法：

1. 安装依赖：

npm install @babel/core @babel/register @babel/preset-env --save-dev

2. 项目根目录创建.babelrc配置文件：

{
  "presets": ["@babel/preset-env"]
}

3. 修改webpack.config.js开头代码：

// webpack.config.js 开头添加
require('@babel/register');
// 正常导入常量
const { token } = require('./constantes.js');
// 其余webpack配置代码...

这样Node.js在导入常量文件时，会先通过Babel将ES语法转译为CommonJS，避免语法错误。

方案4：通过webpack DefinePlugin注入常量（无需在配置文件中导入） #

如果常量是给业务代码使用，可直接用webpack插件注入，不用在配置文件里导入：

// webpack.config.js
const webpack = require('webpack');
const fs = require('fs');
const path = require('path');
const babel = require('@babel/core');

// 转译常量文件为CommonJS并提取token
const constantCode = fs.readFileSync(path.resolve(__dirname, './constantes.js'), 'utf8');
const transpiled = babel.transformSync(constantCode, { presets: ['@babel/preset-env'] });
const { token } = eval(transpiled.code);

module.exports = {
  // 其余配置...
  plugins: [
    new webpack.DefinePlugin({
      'APP_TOKEN': JSON.stringify(token)
    })
  ]
};

之后业务代码里可直接使用APP_TOKEN常量，无需额外导入。

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