Module not found: Error: Can‘t resolve ‘hls.js‘ in ‘E:\Projects\since\startnetweb3.0\starnetweb\node

报错

在这里插入图片描述

这个报错信息是vue-video-player里面的某个模块找不到,虽然是警告⚠,但是看见了就想把它解决了。
解决方法:既然没用到这个文件,那我就直接忽略它,不加载它就可以了,用externals:'hls.js,即可。

// 在webpack.config.js里配置
externals: 'hls.js'

如果是高版本的vue-cli,里面默认没有了build文件夹,只能在vue.config.js里面配置。而且vue-cli更新废除了之前好多的字段。具体去vue-cli官网查看:vue-cli

这里面是可以在vue.config.js配置的字段,有些还需要在webpack.config.js里面配置,就像externals。所以vue-cli给出了这个字段 configureWebpack

具体解决的代码如下:

module.exports = {
  publicPath: './',
  // 跨域代理
  devServer: {
  },
  configureWebpack: { externals: 'hls.js' } // 在这配置webpack的externals这个字段
};

### 解决 Webpack 中无法解析模块的问题 当遇到 `Module not found: Error: Can't resolve './.js'` 的错误时,通常是因为缺少必要的依赖项或者配置文件存在问题。以下是可能的原因以及解决方案: #### 1. 缺少必要依赖 如果项目中缺失某些必需的库或工具链组件,则可能会引发此类错误。例如,在使用 SASS 文件时未安装对应的加载器会触发类似的报错消息。 - 安装所需的 CSS 预处理器及其匹配的 loader 是解决问题的关键之一。对于上述提到的情况可以通过运行命令来添加支持 SASS 的功能[^1]: ```bash yarn add sass ``` 之后记得重新启动开发服务器以使更改生效。 #### 2. 正确设置 Webpack 加载器 确保已经正确设置了用于处理特定类型资源(如 JavaScript、CSS 或图片等)的各种 loaders 和 plugins 。如果没有适当定义这些插件的话也容易造成不到相应扩展名下的文件的现象发生。 比如要集成 Ant Design 组件库到 React 应用程序当中去就需要按照官方文档指示调整 Babel 及 Webpack 设置以便按需引入样式减少体积并优化性能表现[^4]: 修改 `.babelrc` 添加如下内容指向 antd 插件路径: ```json { "plugins": [["import", { "libraryName": "antd", "style": true }]] } ``` 同时还需要确认两个不同环境版本(生产/测试)下各自的 Webpack 配置都包含了针对 antd 的特殊设定部分. 另外还可以尝试通过执行下面这条指令一次性获取多个常用构建工具包从而简化流程加快调试速度[^2]: ```bash npm install --save-dev webpack webpack-cli copy-webpack-plugin webpack-dev-server ``` 这一步骤有助于建立完整的生态系统基础架构,避免因个别组成部分遗漏而导致整体失败的风险增加. #### 3. 路径问题排查 有时即使所有外部条件均已满足但仍会出现 “Can’t resolve” 类型提示信息 , 这可能是由于内部引用关系紊乱造成的 . 检查源码中的 import/export 声明是否准确无误非常重要 . 假设存在这样一个场景 : 当前目录结构如下 : ``` src/ ├── components/ │ └── Button.jsx └── App.jsx ``` 而在 `App.jsx` 内部却这样写法试图调取按钮组件 : ```javascript import Button from 'components/Button'; ``` 那么就极有可能因为相对地址书写不当而引起冲突进而抛出异常警告 . 改正后的形式应该是这样的样子才合理合法合规合乎标准习惯做法 : ```javascript import Button from './components/Button'; // 注意前面加了"./" ``` 综上所述 , 对于 Webpack 报告出来的 module missing 错误可以从以下几个方面入手分析定位根本原因并采取有效措施加以纠正修复 : - **验证所需软件包已成功下载** - **审查现有编译规则覆盖范围** - **核验实际链接表述精确度** 以上方法结合起来往往能够快速高效地消除大部分常规性的技术障碍现象.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值