Webpack DefinePlugin失效报错：TypeError: Cannot read property 'compilation' of undefined

从你贴的配置片段来看，首先能发现plugins里的new webpack.DefinePl...代码没写完，这肯定会引发问题，但就算补全代码，也可能有其他常见原因导致这个报错，我帮你梳理几个核心排查方向：

1. 先确认DefinePlugin的拼写与完整配置 #

很多人会在这里犯低级拼写错误，比如少写字母、大小写错误，正确的完整写法应该是这样：

new webpack.DefinePlugin({
  // 注意：环境变量的值必须用JSON.stringify包裹，否则会被当作代码片段解析
  'process.env.VUE_APP_API_BASE': JSON.stringify('https://your-api-domain.com'),
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
})

一定要确保DefinePlugin的拼写完全正确，大小写也不能错。

2. 检查插件与Webpack版本的兼容性 #

这个Cannot read property 'compilation' of undefined报错，大概率是插件和Webpack版本不匹配导致的：

• 比如你用Webpack 5，但安装的html-loader是适配Webpack 4的旧版本，就会出现这类兼容性问题
• 可以运行npm list webpack html-loader查看当前版本，然后去对应插件的官方文档确认兼容的Webpack版本，再重新安装：

# 举个例子：Webpack 5需要安装v4及以上的html-loader
npm install html-loader@latest --save-dev

3. 统一配置文件的语法规范 #

你的配置里同时用了import webpack from 'webpack';和module.exports，虽然Node.js现在支持混合写法，但偶尔会出现加载顺序问题。建议统一用CommonJS写法（Webpack配置默认更适配这种写法）：

const webpack = require('webpack');
module.exports = {
  entry: { main: './app' },
  output: { path: __dirname + '/dist', publicPath: '/', filename: 'index.js' },
  module: { 
    rules: [ 
      { 
        test: /\.html$/, 
        exclude: /node_modules/, 
        use: {loader: 'html-loader'} 
      } 
    ] 
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
        VUE_APP_CUSTOM_VAR: JSON.stringify('your-custom-value')
      }
    })
  ]
};

如果坚持用ES Module，需要把配置文件后缀改成.mjs，或者在package.json里添加"type": "module"，不过这种方式在Webpack配置里容易踩坑，不推荐。

4. Vue项目的环境变量简化方案 #

如果你是用Vue CLI创建的项目，其实完全不需要手动配置DefinePlugin——Vue CLI已经内置了环境变量处理机制：

• 在项目根目录创建.env.development、.env.production等环境文件
• 在文件里写VUE_APP_XXX=你的变量值（注意必须以VUE_APP_开头）
• 直接在Vue代码里用process.env.VUE_APP_XXX即可，CLI会自动帮你注入这些变量，省去手动配置Webpack的麻烦

先把你没写完的DefinePlugin代码补全，再按照上面的步骤逐一排查，应该就能解决这个报错了。

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