【快速搞定Webpack5】基本配置及开发模式介绍(二)

在开始使用webpack之前么,我们需要对Webpack的配置有一定的认识。
在这里插入图片描述

一、5大核心概念

1. enty(入口)
指示webpack从哪个文件开始打包

2. output(输出)
指示webpack打包完的文件输出到哪里去,如何命名等

3. loader(加载器)
webpack本身只能处理js、json等资源,其他资源需要借助loaderwebpack才能解析

4. plugins(插件)
扩展webpack的功能

5. mode(模式)
主要有两种模式:
● 开发模式:development
● 生产模式:production

二、准备 Webpack 配置文件

在项目根目录下创建文件:webpack.config.js

module.exports = {// 入口entry: "",  // 输出output: {},// 加载器module: {rules: [],},// 插件plugins: [],// 模式mode: "",
};

Webpack 是基于Node.js运行的,所以采用Common.js模块化规范

三、修改配置文件

const path = require("path");module.exports = {// 入口entry: "./src/main.js",  // 需要用相对路径// 输出output: {// 文件的输出路径// __dirname nodejs的变量,代表当前文件的文件夹目录path: path.resolve(__dirname, "dist"),   // 需要用绝对路径 需要用的Nodejs的核心模块 path,专门处理路径问题// 文件名filename: "main.js",},// 加载器module: {rules: [// loader的配置],},// 插件plugins: [// plugin的配置],// 模式mode: "development",
};

四、开发模式介绍

开发模式顾名思义就是我们开发代码时使用的模式。
这个模式下我们主要做两件事:
1、编译代码,使浏览器能识别和运行。
开发时我们有样式资源、字体图片、图片资源、多媒体资源、HTML资源等,webpack默认都不能处理这些,我们需要加载配置来编译这些资源

2、代码质量检测,树立代码规范
提前检查代码的一些可以消除一定隐患与Bug、代码运行起来更加健壮。
提前检查代码规范和格式,统一团队编码风格,让代码更优雅与美观。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

适配器模式:转换接口,无缝对接不同系统

文章目录 **一、技术背景与应用场景****为什么使用适配器模式?****典型应用场景包括但不限于:** **二、适配器模式定义与结构****三、使用步骤举例****四、优缺点分析****总结** 一、技术背景与应用场景 适配器模式在软件设计中扮演着桥梁角色&#xff…

Linux(五)__系统管理

介绍 通常, Windows 中使用"任务管理器"主要有 3 个目的: 利用"应用程序"和"进程"标签来査看系统中到底运行了哪些程序和进程;利用"性能"和"用户"标签来判断服务器的健康状态&#xff1…

前端构造树算法优化

背景 开发过程中遇到后台返回的平铺数据,需要自己根据数据的parent_id将其构造成一套树结构,首先采用递归的方式对数据进行组装。 但后续使用中发现,如果遇到数据量较大(40000)后,该方法的处理耗时明显过长,且导致页面…

怎样重置ubuntu mysql8密码

密码很难记住,所以如果您忘记了 MySQL root 密码,幸运的是,有一种方法可以更改它。这篇文章是为您而写的,在这篇文章结束时,您将成功更改 MySQL 的密码。 本博客演示了如何在 Ubuntu 上重置使用包管理器安装的 MySQL …

vue项目调用摄像头实现拍照功能

目录 1.功能需求 2.API 3.完整代码 4.效果 5.遇到问题 1.功能需求 需求:下面需求图 本来应该使用小程序做,但是为了以后复用考虑,决定使用vue嵌入小程序中。 所以需求就是 调用手机摄像头 实现拍照打卡功能(电脑通用) 2.API …

物联网平台构成与边缘计算

物联网平台 物联网平台系统通常由以下组件构成: 物联网设备: 这些是连接到物联网平台的传感器、设备或物品。它们可以是各种物联网设备,如传感器、执行器、智能设备等。 通信协议: 物联网设备使用各种通信协议与物联网平台进行通…

介绍一下scrapy中items.py,middlerwares.py,pipelines.py,settings.py的作用与简单示例。

在Scrapy框架中,items.py、middlewares.py、pipelines.py和settings.py都是用于实现不同功能的重要模块。以下是它们的作用和一些常见示例: items.py items.py 文件定义了你的项目中需要提取的数据的数据结构。每个爬虫项目都可以定义一个或多个Item类…

React 19即将发布,新增4个Hook函数

近日,React 团队发布消息称,不会载发布 v18.3版本了,而是即将重点放在React v19 版本。新版本将退出四个新的 hook——旨在解决 React 中两个常见的痛点:数据获取和表单处理。虽然这些 hook 目前作为实验性 API 在 React 预览版本中可用,但它们预计将成为 React 19 的稳定…

创建谷歌浏览器插件的具体步骤

创建谷歌浏览器(Chrome)插件需要遵循一系列的步骤。以下是一个基本的指南,用于创建一个简单的Chrome插件: 1. 设置项目文件夹 创建一个新的文件夹,用于存放插件的所有文件。 2. 创建manifest.…

【Redis】Redis的数据分布算法

一共有五种算法,分别为:哈希算法、一致性哈希算法、带有限负载的一致性哈希算法、虚拟节点一致性哈希算法、虚拟槽分区 哈希算法 思想:根据某个key的值或者key 的哈希值与当前可用的 master 节点数取模,根据取模的值获取具体的服…

机器学习 -- 矩阵和向量

场景 在之前的knn算法和余弦算法等算法中,都有很重要的概念,叫做矩阵和向量。这个是机器学习中很重要的概念。今天来深入学习一些矩阵和向量的一些知识。 向量(Vector) 向量是一个有序的数字列表,可以在几何中表示为从原点出发的箭头。在机…

halcon 标定多元点标定板、棋盘格映射矫正图像、矫正失真图像

一、标定多圆孔标定 其理论与棋盘格 和圆孔都是一样的,不一样的地方就是定方向的方式不一样。如图 2、结果 read_image (CalibImage, ./circle/1.png) get_image_size (CalibImage, Width, Height) dev_close_window () dev_open_window_fit_image (CalibImage, 0…

推荐一款Vite中加载svg的小工具

最近开发中使用到一个好玩的Vite三方小插件vite-plugin-svg-icons很实用,可以辅助我们开发过程中快速加载svg小图标。其原理是在Vite编译器的时候通过一次性的DOM操作将SVG插入DOM结构中,然后通过使用内联SVG进行加载访问,极大的方便了我们的小图标引用模式。 若只是少量的s…

PE 资源表-字符串

最近在写PE加载代码,写到LoadStringA时一直找不到字中的ID,网上搜索的资源只分析三层目录,之后的找不相关资料,只好自己分析。 资料显示pe资源表 分三层目录,之后是节点,再指向数据, 第二层的…

“成像光谱遥感技术中的AI革命:ChatGPT应用指南“

遥感技术主要通过卫星和飞机从远处观察和测量我们的环境,是理解和监测地球物理、化学和生物系统的基石。ChatGPT是由OpenAI开发的最先进的语言模型,在理解和生成人类语言方面表现出了非凡的能力。本课程重点介绍ChatGPT在遥感中的应用,人工智…

2024牛客寒假算法基础集训营4(视频讲解题目)

2024牛客寒假算法基础集训营4&#xff08;视频讲解题目&#xff09; 视频链接ABCDEFG、H&#xff08;下面是hard版本的代码两个都可以过&#xff09; 视频链接 2024牛客寒假算法基础集训营4&#xff08;视频讲解题目&#xff09; A #include<bits/stdc.h> #define en…

【教程】N2N V3内网穿透、异地组网,包括Win/Linux/Android,包括不同内网实现adb远程连接

目录 一、背景 二、Linux 配置 并运行 N2N - Supernode (必选) 三、Linux -- 配置 并运行 N2N - 边缘节点配置 Edge(可选步骤) 四、Windows -- 配置 并运行 N2N - 边缘节点配置 Edge (可选步骤) (一)配置 TAP 虚拟网卡 (二)配置 N

C++:C++入门基础

创作不易&#xff0c;感谢三连 &#xff01;&#xff01; 一、什么是C C语言是结构化和模块化的语言&#xff0c;适合处理较小规模的程序。对于复杂的问题&#xff0c;规模较大的程序&#xff0c;需要高度的抽象和建模时&#xff0c;C语言则不合适。为了解决软件危机&#xff…

子网络划分与互通,上网行为审计

网络环境需求:在办公网络环境中,由于公司部门的划分,以及服务器、电脑、手机等设备类型,一般都需要划分多个网段,便于进行网络管理,并提升网络通信效率。各个子网段管理员控制设备的接入,子网段之间需要进行局域网通信,发送消息和文件,通常使用飞秋。服务器网段,禁止…

Java Mybatis面试题解析(下)

15. 说一下Mybatis的一级缓存和二级缓存&#xff1f;【重点】 考核点&#xff1a;Mybatis缓存。 答&#xff1a; Mybatis的一级缓存是指SqlSession&#xff0c;一级缓存的作用域是SqlSession&#xff0c;Mybaits默认开启一级缓存&#xff1b; 在同一个SqlSession中&#xf…