解决:黑马webpack视频中出现的问题总结

问题 1 ERROR in main Module not found: Error: Can‘t resolve ‘./src‘

解决 Webpack 中 ERROR in main Module not found: Error: Can‘t resolve ‘./src‘ 问题
黑马AJAX-Node.js-Webpack教学视频(BV1MN411y7pw 其中P98)中webpack部分,打包的时候出错

在这里插入图片描述

ERROR in main
Module not found: Error: Can't resolve './src' in 'V:\Web\mycode\webpack\01_webpack_use'
resolve './src' in 'V:\Web\mycode\webpack\01_webpack_use'
  using description file: V:\Web\mycode\webpack\01_webpack_use\package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: V:\Web\mycode\webpack\01_webpack_use\package.json (relative path: ./src)
      no extension

看了很多帖子,这个错误其实大概是路径写错。但是我重写了一次代码确保路径没有错。最终我发现是,index.html 被我命名为 test.html 从而出错。改回名字之后运行正确。

这个问题刚好对应到下一节视频内容,Webpack 入口(entry)的默认值是 ./src/index.js

  • 通过修改之后文件名字之后打包成功。
    在这里插入图片描述
    运行正确:
    在这里插入图片描述

2 修改 Webpack 打包入口和出口 时出现问题

黑马AJAX-Node.js-Webpack教学视频(BV1MN411y7pw 其中P99),webpack打包的时候出错

报错出在:修改 Webpack 打包入口和出口 时出现问题,把入口的默认值 ./src/index.js改成 ./src/login/index.js,把出口的默认值 output.filename 修改成 filename: './login/index.js',后,打包出错

问题2.1 [webpack-cli] ReferenceError: require is not defined in Es module scope

在这里插入图片描述

[webpack-cli] Failed to load 'webpack.config.js' config
[webpack-cli] ReferenceError: require is not defined in ES module scope,you can use import instead
This file is being treated as an ES moule because it has a '.js' file extension and 'package.json' contains "type": "module". To treat it as a CommonJs script,rename it to use the '.cjs' file extension.

错误原因,我在package.json中添加了 ````“type”: “module”``导致文件被认为是 ES6标准,ES6规范和commonJS规范冲突,加了之后要使用ES6规范,但是我没有用,所以删除之后错误变成了下面这样:

问题2.2 Error in main Module not found

在这里插入图片描述
这里是跟着黑马视频在 webpack.config.js 中 用了 path.resolve。最后改成path.join就可以了。
怎么发现是这里出错的? ——因为上图,报错提示最后有一句 No description file found in V:\src\login or above 这个路径明显不对,没有把绝对路径加上去,所以只能是拼接路径的时候出错。但我目前也不知道为什么黑马的视频能打包成功但我的不行。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/458718.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

phpcms上传导致getshell详解及案例

一、环境 这里我根据大佬的文章将环境复原 phpcms上传导致getshell详解及案例 | 离别歌 回忆phpcms头像上传漏洞以及后续影响 | 离别歌 二、代码&#xff1a; php&#xff1a; <?php header("Content-Type:text/html; charsetutf-8"); require_once(pclzip…

Unload-labs

function checkFile() {var file document.getElementsByName(upload_file)[0].value;if (file null || file "") {alert("请选择要上传的文件!");return false;}//定义允许上传的文件类型var allow_ext ".jpg|.png|.gif";//提取上传文件的类…

Pytorch学习 day10(L1Loss、MSELoss、交叉熵Loss、反向传播)

Loss loss的作用如下&#xff1a; 计算实际输出和真实值之间的差距为我们更新模型提供一定的依据&#xff08;反向传播&#xff09; L1Loss 绝对值损失函数&#xff1a;在每一个batch_size内&#xff0c;求每个输入x和标签y的差的绝对值&#xff0c;最后返回他们平均值 M…

python创建虚拟环境-Anaconda安装配置和使用

Anaconda提供了一个名为conda的包管理工具&#xff0c;可以方便地创建、管理和分享Python环境。用户可以根据自己的需要创建不同的环境&#xff0c;每个环境都可以拥有自己的Python版本、库和依赖项&#xff0c;这样就可以避免因为不同项目之间的依赖关系而导致的冲突问题。 一…

Vscode中关于Java的一些问题

前言 在使用Vscode的时候&#xff0c;总是会有这么一种感觉&#xff1a;有时得这样&#xff0c;有时得那样&#xff0c;这让我甚是困惑&#xff0c;于是写下来这篇解答文章 为什么java文件有时候会有class文件&#xff0c;有时候没有 在编写Java代码时&#xff0c;我会有一种…

【Java基础】IO流(二)字符集知识

目录 字符集知识 1、GBK字符集 2、Unicode字符集&#xff08;万国码&#xff09; 3、乱码 4、Java中编码和解码的方法 字符集知识 字符&#xff08;Character&#xff09;&#xff1a;在计算机和电信技术中&#xff0c;一个字符是一个单位的字形、类字形单位或符号的基本信…

智能合约开发基础知识:最小信任机制、智能合约、EVM

苏泽 大家好 这里是苏泽 一个钟爱区块链技术的后端开发者 本篇专栏 ←持续记录本人自学两年走过无数弯路的智能合约学习笔记和经验总结 如果喜欢拜托三连支持~ 专栏的前面几篇详细了介绍了区块链的核心基础知识 有兴趣学习的小伙伴可以看看http://t.csdnimg.cn/fCD5E关于区块…

光伏便携式EL检测仪是什么?—科技助农

光伏便携式EL监测仪是一种专门用于检测光伏电池组件性能的高效、实用的设备。它利用电致发光&#xff08;Electroluminescence&#xff0c;EL&#xff09;原理&#xff0c;通过检测光伏板在受到光照后产生的电流所激发出的光线&#xff0c;来评估光伏板的性能。这种设备通常具有…

Linux搭建我的世界(MC)整合包服务器,All the Mods 9(ATM9)整合包开服教程

Linux使用MCSM面板搭建我的世界(Minecraft)整合包服务器&#xff0c;MC开服教程&#xff0c;All the Mods 9(ATM9)整合包搭建服务器的教程。 本教程使用Docker来运行mc服&#xff0c;可以方便切换不同Java版本&#xff0c;方便安装多个mc服版本。 视频教程&#xff1a;https:…

算法的渐进时间复杂度

T(n) = O(F(n)) T(n):Time 渐进时间复杂度 O:正比例关系 F(n):代码执行次数 只要代码执行的次数越来越多 所耗费的时间也就越来越高 常见的5种: O(n^2) O(n logn) O(n) O(logn) O(1):不管重复多少次1次也是这个时间,10次也是这个时间。 时间复杂度排序:由小到…

C语言指针与数组(不适合初学者版):一篇文章带你深入了解指针与数组!

&#x1f388;个人主页&#xff1a;JAMES别扣了 &#x1f495;在校大学生一枚。对IT有着极其浓厚的兴趣 ✨系列专栏目前为C语言初阶、后续会更新c语言的学习方法以及c题目分享. &#x1f60d;希望我的文章对大家有着不一样的帮助&#xff0c;欢迎大家关注我&#xff0c;我也会回…

我记不住的那些命令-xxdod

背景&#xff1a; 这里记录一下具体的xxd和od命令参数和使用方法&#xff0c;我想我肯定是记不住这些参数的。 零、文件 我们这里有一个示例文件README.txt&#xff0c;内容如下图所示&#xff1a; 一、xxd(查看、编辑二进制文件) 1. 十六进制显示(默认) 我们发现上面的显…

使用代理ip后访问网站仍然被拒该怎么办

目录 前言 一、代理IP被网站封锁 二、代理IP的质量不佳 三、代理设置不正确 总结 前言 在使用代理IP之后仍然被网站拒绝访问可能是由于多种原因引起的。这些原因包括代理IP被网站封锁、代理IP的质量不佳、代理设置不正确等。下面将详细介绍如何解决这些问题。 一、代理I…

代码学习记录16

随想录日记part16 t i m e &#xff1a; time&#xff1a; time&#xff1a; 2024.03.11 主要内容&#xff1a;今天的主要内容是二叉树的第五部分&#xff0c;主要涉及最大二叉树&#xff1b;合并二叉树&#xff1b;二叉搜索树的搜索&#xff1b;验证二叉搜索树。 654.最大二叉…

使用docker-compose部署Redis集群

一、部署三主三从的Redis集群 分别为6个节点建立挂载目录&#xff0c;每个目录下建立数据、配置、日志文件夹。 docker-compose内容如下&#xff1a; version: 3 services:redis1:image: redis:6.2.3restart: alwaysports:- "6379:6379"- "16379:16379"v…

Spring揭秘:ClassPathScanningProvider接口应用场景及实现原理!

技术应用场景 ClassPathScanningCandidateComponentProvider是Spring框架中一个非常核心的类&#xff0c;它主要用于在类路径下扫描并发现带有特定注解的组件&#xff0c;支持诸如ComponentScan、Component、Service、Repository和Controller等注解的自动扫描和注册。 ClassP…

.NET开源快速、强大、免费的电子表格组件

今天大姚给大家分享一个.NET开源&#xff08;MIT License&#xff09;、快速、强大、免费的电子表格组件&#xff0c;支持数据格式、冻结、大纲、公式计算、图表、脚本执行等。兼容 Excel 2007 (.xlsx) 格式&#xff0c;支持WinForm、WPF和Android平台&#xff1a;ReoGrid。 项…

普发Pfeiffer TPG256A MaxiGauge 真空计控制器接口通讯针脚等详情见图目录

普发Pfeiffer TPG256A MaxiGauge 真空计控制器接口通讯针脚等详情见图目录

强化学习中SARSA(State-Action-Reward-State-Action)和Q-learning的区别

SARSA&#xff08;State-Action-Reward-State-Action&#xff09;和Q-learning是两种经典的强化学习算法&#xff0c;它们都用于学习最优策略以使智能体在一个环境中获得最大的累积奖励。它们之间的主要区别在于它们更新动作值函数&#xff08;Q值函数&#xff09;的方式以及其…

SwiftUI组件-DatePicker

SwiftUI组件-DatePicker 本文记录一下SwiftUI组件-DatePicker import SwiftUIstruct DatePickerBootCamp: View {State var selectedDate: Date Date()var dateFormatter: DateFormatter {let formatter DateFormatter()formatter.dateStyle .shortformatter.timeStyle .…
最新文章