Gulp中出现webpack is not defined错误的排查求助

嘿，我之前也踩过这个一模一样的坑！别焦虑，咱们从几个最常见的排查点入手，大概率能解决：

• 确认webpack的局部安装与正确导入
  首先要确保你已经在项目本地安装了webpack（不是只全局安装），执行过：

  npm install webpack webpack-stream gulp --save-dev
  

  然后在gulpfile.js里必须明确导入webpack：

  const webpack = require('webpack'); // 这行绝对不能漏！
  const webpackStream = require('webpack-stream');
  

  很多时候报错就是因为只装了全局webpack，但局部项目里没装，或者忘了写这行导入。

• 检查webpack-stream调用时的参数传递
  如果你用了单独的webpack.config.js配置文件，在gulp任务里调用webpack-stream时，必须把webpack实例作为第二个参数传进去：

  const webpackConfig = require('./webpack.config.js');
  
  gulp.task('bundle', function() {
    return gulp.src('src/entry.js')
      .pipe(webpackStream(webpackConfig, webpack)) // 第二个参数webpack是关键！
      .pipe(gulp.dest('dist/'));
  });
  

  这是最容易忽略的点——webpack-stream本身不包含webpack，必须手动传入你导入的webpack实例，否则它会找不到webpack对象。

• 排查版本兼容性问题
  webpack-stream和webpack的版本必须匹配，比如webpack 5需要搭配webpack-stream 6.x及以上版本，旧版的webpack-stream不支持webpack 5。你可以查看package.json里的版本号，要是版本不兼容，就升级或降级到匹配的版本：

  # 比如升级到最新兼容版
  npm install webpack-stream@latest --save-dev
  

• 清理缓存并重新安装依赖
  有时候node_modules里的文件可能损坏，或者npm缓存出问题。试试删除node_modules文件夹和package-lock.json，然后重新运行：

  rm -rf node_modules package-lock.json
  npm install
  

  重启终端后再执行gulp任务，说不定就能解决奇怪的加载问题。

• 检查拼写与变量名错误
  最后再仔细核对一遍：是不是把webpack写成了大写的Webpack？或者webpack-stream的导入变量名写错了？比如不小心写成了webpackstream（小写s），这种低级错误有时候也会导致报错。

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