webpack-cli运行报ReferenceError: require is not defined如何解决

你的报错根源来自package.json中的"type": "module"配置：

• Node v13.2.0及以上版本支持该字段，配置后所有.js后缀的文件都会被Node默认识别为ES Module规范
• 你的webpack配置文件使用的是CommonJS语法（require导入、module.exports导出都是CommonJS专属API），被Node当作ES Module加载时自然会抛出require is not defined错误

你要保留webpack配置用CommonJS、业务代码用ES6的需求，可任选以下一种方案实现：

方案1：修改webpack配置文件后缀（推荐，无需改动全局模块规范） #

• 将你的webpack配置文件webpack.config.dev.js后缀改为.cjs，即webpack.config.dev.cjs，Node会强制将.cjs文件按CommonJS规范解析
• 修改package.json中scripts的build命令，将配置路径对应修改：

  "build": "webpack --config webpack/webpack.config.dev.cjs"
  

该方案可以保留你原有的"type": "module"配置，不影响业务代码的ES Module语法使用。

方案2：删除package.json中的"type": "module"配置 #

• 删除该字段后，Node默认将所有.js文件按CommonJS规范解析，webpack配置可以直接正常加载
• 业务代码的ES6语法不会受影响：因为你的业务代码是交给babel-loader和webpack打包处理的，不会直接被Node加载执行，你原有babel配置完全可以正常编译ES6+语法

你当前配置还有几个小问题会影响后续运行，可以同步修正：

• webpack配置中的exclude字段当前写的是字符串"/node_modules/"，应改为正则/node_modules/，否则无法正确过滤node_modules目录下的代码
• webpack配置中的entry路径有误：配置文件放在webpack目录下，./index.js指向的是webpack目录下的文件，应改为对应业务入口的正确路径，比如../src/index.js
• 你的index.html中script标签的src属性缺少左引号，修正为<script src="bundle-web.js"></script>
• 你当前的dev命令逻辑是先打包再用Node直接执行前端业务入口src/index.js，这是错误的：前端打包后的产物应该在浏览器运行，如果你需要启动本地开发服务，建议安装webpack-dev-server替换现有dev脚本逻辑

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