升级Babel/React版本后webpack配置文件import语句报错如何解决

Node.js 默认采用 CommonJS 模块规范，仅支持require/module.exports语法导入导出模块。你在webpack配置中使用了ES模块的import语法，但Node.js未将该配置文件识别为ES模块，因此触发语法报错。
你在升级Babel和React版本后出现该问题，大概率是旧版本依赖默认提供的webpack配置文件自动转译能力失效，ES语法没有被预先转译为Node.js可识别的CommonJS语法就被执行。

你可以根据项目情况任选以下任意一种方案修复：

• 直接修改配置文件为CommonJS规范（最快修复，无需调整其他依赖）
  将import webpack from 'webpack'替换为const webpack = require('webpack')，所有export default配置导出语句替换为module.exports = 即可。
• 将项目整体切换为ES模块规范
  在项目根目录的package.json中新增配置项"type": "module"，Node.js会默认将所有.js后缀文件识别为ES模块，即可直接支持import语法。
• 保留ES语法，补全Babel转译配置
  确保项目已安装@babel/register、@babel/preset-env依赖，在Babel配置文件中配置@babel/preset-env的编译目标为当前Node.js版本，运行webpack命令时添加参数指定转译入口：node -r @babel/register node_modules/webpack/bin/webpack.js -d --watch

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