当前位置： 首页 > article >正文

解决webpack4 import 动态导入组件打包报错

article 2025/2/23 8:14:21

解决webpack4 import 动态导入组件打包报错

  • 问题描述
  • 分析原因：
  • 解决方法
    • 1. 安装babel-plugin-dynamic-import-webpack
    • 2.修改 .babelrc 文件或者webpack配置文件，在plugins中添加如下配置
    • 3.重新执行打包命令

问题描述

ERROR in ./src/index.js 1:18
Module parse failed: Unexpected token (1:18)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. S
ee https://webpack.js.org/concepts#loaders

import axios from axios

分析原因：

从代码报错位置来看，代码中使用了动态import加载组件，大体的方向定位了，后面就好办了。

google一下得知，webpack4不支持import动态加载，建议使用babel-plugin-dynamic-import-webpack来解决…

解决方法

1. 安装babel-plugin-dynamic-import-webpack

npm i babel-plugin-dynamic-import-webpack -D

2.修改 .babelrc 文件或者webpack配置文件，在plugins中添加如下配置

“plugins”: [
“dynamic-import-webpack”
],

3.重新执行打包命令


http://www.kler.cn/a/554851.html

相关文章：

  • 第4章 信息系统架构（四）
  • Android GreenDAO 适配 AGP 8.0+
  • web网络安全:SQL 注入攻击
  • 第150场双周赛：好数字之和、分割正方形 Ⅰ、分割正方形 Ⅱ、最短匹配字符串
  • HBase的安全性考量：保护你的数据不受威胁
  • 蓝桥杯学习大纲
  • DeepSeek部署到本地（解决ollama模型下载失败问题）
  • 【2025最新版】Chrome谷歌浏览器如何能恢复到之前的旧版本
  • 基于单片机的智能网控风扇设计
  • C++:类与对象，定义类和构造函数
  • 【ISO 14229-1:2023 UDS诊断（ECU复位0x11服务）测试用例CAPL代码全解析⑩】
  • CSS盒模
  • 学习 `@PreDestroy`：Java EE/Jakarta EE 生命周期回调
  • Linux top 命令
  • jsherp importItemExcel接口存在SQL注入
  • 【Leetcode】二叉树的最大深度
  • 2025最新面试自用题库---面试使用
  • Redis 持久化：从零到掌握
  • 微信小程序客服消息接收不到微信的回调
  • 【OpenCV】OpenCV 中各模块及其算子的详细分类