Webpack4升级Webpack5后入口文件import语句报错解决方案求助

• 缺少普通.js文件的ES语法转译规则：Webpack 5不会默认转译.js文件中的ESModule语法，浏览器直接加载包含import语句的原始代码就会抛出对应错误，Webpack 4的旧构建流程隐含了相关转译逻辑所以运行正常。
• vue-loader版本不兼容：你当前使用的vue-loader@14.2.3是专门适配Webpack 4的版本，和Webpack 5不匹配，无法正确处理单文件组件和关联JS的模块转换。
• 缺失VueLoaderPlugin配置：vue-loader从v15版本开始要求必须在webpack的plugins中注册对应插件，才能正常拆分.vue文件的模板、样式、脚本逻辑。

1. 安装适配版本的依赖 #

执行以下命令更新/安装必要依赖：

npm install -D vue-loader@15.10.1 @babel/core @babel/preset-env babel-loader

选择v15版本的vue-loader是为了适配你当前使用的Vue 2版本，兼容性最优。

2. 修改webpack.config.js配置 #

首先在文件头部引入VueLoaderPlugin：

const { VueLoaderPlugin } = require('vue-loader');

然后在module.rules数组中新增.js文件的转译规则：

{
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: /node_modules/
}

最后在plugins数组中添加VueLoaderPlugin实例：

plugins: [
  new VueLoaderPlugin(),
  // 原有HtmlWebpackPlugin配置保持不变
]

3. 新增Babel配置文件 #

在项目根目录新建babel.config.json文件，写入以下内容：

{
  "presets": ["@babel/preset-env"]
}

该配置会自动将代码中的ESModule语法转译为浏览器兼容的语法，彻底解决import语句报错的问题。

4. 回退无效修改 #

不要在package.json中添加"type": "module"配置，你的webpack配置文件使用的是CommonJS语法，添加该配置后会导致Node.js将webpack配置识别为ESModule，触发更多报错，保持原有package.json配置即可。

Webpack 5已经内置了资源模块处理能力，你可以移除file-loader依赖，改用内置的asset模块处理图片等静态资源，减少第三方依赖复杂度，该修改不影响现有功能运行。

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