Webpack Encore中process未定义问题求助及构建调试方法

可能遗漏的配置点 #

1. ESLint全局变量声明 #

如果报错来自ESLint（而非webpack编译阶段），需要在ESLint配置文件（如.eslintrc.js）中声明process为全局变量：

module.exports = {
  // ...其他配置
  globals: {
    process: true
  }
};

2. Webpack 5的环境变量注入配置 #

Webpack 5默认移除了Node.js全局变量的polyfill，因此需要通过DefinePlugin手动注入process.env：

const webpack = require('webpack');
const dotenv = require('dotenv');

// 加载.env文件内容
dotenv.config();

module.exports = {
  // ...其他webpack配置
  plugins: [
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(process.env)
      // 也可只注入需要的变量，减少打包体积
      // 'process.env.YOUR_KEY': JSON.stringify(process.env.YOUR_KEY)
    })
  ]
};

3. dotenv-webpack的正确配置 #

确保在webpack配置中正确引入并实例化插件，同时确认.env文件路径为项目根目录（若路径自定义需手动指定）：

const Dotenv = require('dotenv-webpack');

module.exports = {
  // ...其他webpack配置
  plugins: [
    new Dotenv()
    // 自定义路径写法：new Dotenv({ path: './custom/path/.env' })
  ]
};

4. 检查.env文件格式 #

确保.env文件变量格式正确，避免多余空格或不必要的引号（值含空格时例外）：

# 正确格式
YOUR_KEY=your_value
# 错误示例
# YOUR_KEY = "your_value"

5. 清除构建缓存 #

旧缓存可能导致配置未生效，执行以下命令清除：

# 清除webpack缓存
rm -rf node_modules/.cache
# 清除yarn缓存（可选）
yarn cache clean

调试Yarn构建流程的方法 #

1. 开启Webpack调试模式 #

在webpack配置中设置开发模式并启用源码映射，同时用--verbose查看详细日志：

module.exports = {
  mode: 'development',
  devtool: 'source-map' // 生成源码映射，便于定位错误
};

运行构建命令：

yarn build --verbose

2. 在Webpack配置中添加日志输出 #

在关键步骤插入console.log，验证环境变量是否被正确加载：

const dotenv = require('dotenv');
const env = dotenv.config();
console.log('Loaded environment variables:', env.parsed); // 查看加载的变量列表

module.exports = {
  // ...配置内容
};

3. 检查打包后的文件 #

构建完成后，查看输出目录（如dist）中的JS文件，搜索process.env是否被替换为实际变量值，确认注入是否成功。

4. 使用webpack-bundle-analyzer分析打包内容 #

安装并配置插件，直观查看打包资源组成：

yarn add webpack-bundle-analyzer --dev

在webpack配置中添加：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

运行构建后会自动打开浏览器展示分析报告。

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