前端工程化之:webpack1-2(安装与使用)
一、webpack简介
webpack中文网
webpack 是基于模块化的打包(构建)工具,它把一切视为模块它通过一个开发时态的入口模块为起点,分析出所有的依赖关系,然后经过一系列的过程(压缩、合并),最终生成运行时态的文件。
webpack的特点:
- 为前端工程化而生: webpack 致力于解决前端工程化,特别是浏览器端工程化中遇到的问题,让开发者集中注意力编写业务代码,而把工程化过程中的问题全部交给 webpack 来处理。
- 简单易用:支持零配置,可以不用写任何一行额外的代码就使用 webpack 。
- 强大的生态: webpack 是非常灵活、可以扩展的, webpack 本身的功能并不多,但它提供了一些可以扩展其功能的机制,使得一些第三方库可以融于到 webpack 中。
- 基于 nodejs :由于 webpack 在构建的过程中需要读取文件,因此它是运行在 node 环境中的。
- 基于模块化: webpack 在构建过程中要分析依赖关系,方式是通过模块化导入语句进行分析的,它支持各种模块化标准,包括但不限于 CommonJS 、 ES6 Module 。
二、webpack的安装和使用
安装:
webpack 通过 npm 安装,它提供了两个包:
- webpack:核心包,包含了 webpack 构建过程中要用到的所有 api ;
- webpack-cli:提供一个简单的 cli 命令,它调用了 webpack 核心包的 api ,来完成构建过程。
安装方式:
- 全局安装: 可以全局使用 webpack 命令,但是无法为不同项目对应不同的 webpack 版本;
- 本地安装:推荐,每个项目都使用自己的 webpack 版本进行构建
本地安装步骤:
1.新建一个文件夹,在该文件夹目录下使用 cmd 命令进入窗口;
2.在打开的窗口中输入 npm init 进行项目初始化;
npm init // 初始化
3.安装 webpack 依赖
npm i -D webpack webpack-cli // 安装依赖
使用:
webpack // npx webpack
默认情况下, webpack 会以 ./src/index.js 作为入口文件分析依赖关系,打包到 ./dist/main.js 文件中。
通过 --mode 选项可以控制 webpack 的打包结果的运行环境。默认是生产环境。
npx webpack --mode=development // 开发环境打包
npx webpack --mode=production// 生产环境打包
一般在 package.json 文件中进行脚本配置。
"scripts": {"dev":"webpack --mode=development","build":"webpack --mode=production"},
配置后可以用 npm 命令进行开发环境和生产环境打包。
npm run dev // 开发环境打包
npm run build // 生产环境打包
相关文章:
前端工程化之:webpack1-2(安装与使用)
一、webpack简介 webpack中文网 webpack 是基于模块化的打包(构建)工具,它把一切视为模块它通过一个开发时态的入口模块为起点,分析出所有的依赖关系,然后经过一系列的过程(压缩、合并),最终生成运行时态的文件。 webpack的特点&a…...

MySQL索引类型及数据结构【笔记】
1 索引类型 返回面试宝典 主键索引(PRIMARY):数据列不允许重复,不允许为NULL,一个表只能有一个主键。 唯一索引(UNIQUE):数据列不允许重复,允许为NULL,一个表允许多个列创建唯一索引…...

成熟的内外网数据交换方案,如何实现跨网传输?
网络迅速发展,我们可以从网络上查找到各式各样的信息,但是同时网络安全问题也随之严重。近几年,各种有关网络安全的新闻不断被报道,数据泄露给很多企业带来了严重打击,不仅是经济损失,严重者还会对企业的声…...

python11-Python的字符串之repr
有时候,我们需要将字符串与数值进行拼接,而 Python 不允许直接拼接数值和字符串,程序必须先将数值转换成字符串。 为了将数值转换成字符串,可以使用str0或repr()函数,例如如下代码。 # !/usr/bin/env python# -*- co…...

python小项目:口令保管箱
代码: #! python3 # python 编程-----口令保管箱passwords{emails: F7minlBDDuvMJuxESSKHFhTxFtjVB6,blog:VmALvQyKAxiVH5G8v01if1MLZF3sdt,luggage:12345,} import sys,pyperclip if len(sys.argv)<2:print(usage:python python3文件[accout]-copy accout pass…...

微认证 openEuler社区开源贡献实践
文章目录 1. 开源与开源社区2. openEuler 社区概述3.参与openEuler社区贡献4.openEuler软件包开发Linux软件管理——源码编译 1. 开源与开源社区 Richard Matthew Stallman,1983年9月推出GNU项目,并发起自由软件运动(free software movement或free/open…...

紫光展锐M6780丨超分辨率技术——画质重构还原经典
上一期,我们揭秘了让画质更加炫彩的AI-PQ技术。面对分辨率较低的老电影,光有高饱和度的色彩是不够的,如何能够提高视频影像的分辨率,使画质更加清晰,实现老片新看? 本期带大家揭晓紫光展锐首颗AI8K超高清智…...
《Python 简易速速上手小册》第6章:Python 文件和数据持久化(基于最新版 Python3.12 编写)
注意:本《Python 简易速速上手小册》 核心目的在于让零基础新手「快速构建 Python 知识体系」 文章目录 <mark >注意:本《Python 简易速速上手小册》<mark >核心目的在于让零基础新手「快速构建 Python 知识体系」 6.1 文件读写操作6.1.1 打…...

华为机考入门python3--(4)牛客4-字符串分隔
分类:字符串 知识点: 复制符号* 复制3个0 0*3 000 字符串截取 截取第i位到j-1位 str[i:j] 题目来自【牛客】 input_str input().strip()# 先补齐 if len(input_str) % 8 ! 0: input_str 0 * (8 - len(input_str) % 8) # 每8个分 out…...

Unity MonoBehaviour 生成dll
dllllllllllllll🥓 🥙vs创建类库项目🧀添加UnityEngine、UnityEditor引用🍕添加MonoBehaviour类🦪设置dll生成路径🍿生成dll🍔使用dll中的Mono类 🥙vs创建类库项目 🧀添加…...

基于Python flask MySQL 猫眼电影可视化系统设计与实现
1 绪论 1.1 设计背景及目的 猫眼电影作为国内知名的电影信息网站,拥有海量的电影信息、票房数据和用户评价数据。这些数据对于电影市场的研究和分析具有重要意义。然而,由于数据的复杂性和数据来源的多样性,如何有效地采集、存储和展示这些数…...

【新课上架】安装部署系列Ⅲ—Oracle 19c Data Guard部署之两节点RAC部署实战
01 课程介绍 Oracle Real Application Clusters (RAC) 是一种跨多个节点分布数据库的企业级解决方案。它使组织能够通过实现容错和负载平衡来提高可用性和可扩展性,同时提高性能。本课程基于当前主流版本Oracle 19cOEL7.9解析如何搭建2节点RAC对1节点单机的DATA GU…...
gdb调试std::list和std::vector等容器的方法
GDB中print方法并不能直接打印STL容器中保存的变量,其实只要http://www.yolinux.com/TUTORIALS/src/dbinit_stl_views-1.03.txt这个文件保存为~/.gdbinit 就可以使用它提供的方法方便调试容器 指定启动文件:~/.gdbinit,下面的方法任选其一。…...
python stomp 转发activemq topic消息
import pysimplestomp 连接到ActiveMQ的Topic: # 连接ActiveMQ服务器 server "tcp://localhost:61613" topic "/topic/your_topic"# 连接到ActiveMQ的Topic destination f"destination://{topic}" connection pysimplestomp.con…...

Spring Boot使用AOP
一、为什么需要面向切面编程? 面向对象编程(OOP)的好处是显而易见的,缺点也同样明显。当需要为多个不具有继承关系的对象添加一个公共的方法的时候,例如日志记录、性能监控等,如果采用面向对象编程的方法&…...

C语言通过IXMLHttpRequest以get或post方式发送http请求获取服务器文本或xml数据
做过网页设计的人应该都知道ajax。 Ajax即Asynchronous Javascript And XML(异步的JavaScript和XML)。使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发…...

QtRVSim(二)一个 RISC-V 程序的解码流程
继上一篇文章简单代码分析后,本文主要调研如何实现对指令的解析运行。 调试配置 使用 gdb 工具跟踪调试运行。 c_cpp_properties.json 项目配置: {"name": "QtRvSim","includePath": ["${workspaceFolder}/**&quo…...

x-cmd pkg | httpx - 为 Python 设计的下一代 HTTP 客户端库
目录 简介首次用户功能特点进一步探索 简介 HTTPX 是一个为 Python 设计的下一代 HTTP 客户端库,由 Tom Christie 创建。它提供了同步和异步的 API,并支持 HTTP/1.1 和 HTTP/2 协议。与 Requests 库类似,但增加了对异步请求的支持和 HTTP/2 …...
代码随想录算法训练营第四十二天(动态规划篇)|62. 不同路径
62. 不同路径 题目链接:62. 不同路径 - 力扣(LeetCode) 思路 dp[i][j]: 从0到位置[i, j]共有dp[i][j]条路径。 dp[i][j] dp[i-1][j] dp[i][j-1] 到位置[i,j],可以从它的上面或者左边来,所以路径和为这两个方向的路…...

YOLO 全面回顾:从最初的YOLOv1到最新的YOLOv8、YOLO-NAS,以及整合了 Transformers 的 YOLO
YOLO 全面回顾 综述评估指标YOLO v1YOLO v2YOLO v3YOLO v4YOLOv5 与 Scaled-YOLOv4 YOLORYOLOXYOLOv6YOLOv7DAMO-YOLOYOLOv8PP-YOLO, PP-YOLOv2, and PP-YOLOEYOLO-NASYOLO with Transformers 综述 论文:https://arxiv.org/pdf/2304.00501.pdf 代码:gi…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表?1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
pam_env.so模块配置解析
在PAM(Pluggable Authentication Modules)配置中, /etc/pam.d/su 文件相关配置含义如下: 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块,负责验证用户身份&am…...

《通信之道——从微积分到 5G》读书总结
第1章 绪 论 1.1 这是一本什么样的书 通信技术,说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号(调制) 把信息从信号中抽取出来&am…...

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)
目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关࿰…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中,新增了一个本地验证码接口 /code,使用函数式路由(RouterFunction)和 Hutool 的 Circle…...
Android第十三次面试总结(四大 组件基础)
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成,用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机: onCreate() 调用时机:Activity 首次创建时调用。…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数(函数作为参数、返回值) 三、匿名函数与闭包1. 匿名函数(Lambda函…...

Qt的学习(一)
1.什么是Qt Qt特指用来进行桌面应用开发(电脑上写的程序)涉及到的一套技术Qt无法开发网页前端,也不能开发移动应用。 客户端开发的重要任务:编写和用户交互的界面。一般来说和用户交互的界面,有两种典型风格&…...

Java数组Arrays操作全攻略
Arrays类的概述 Java中的Arrays类位于java.util包中,提供了一系列静态方法用于操作数组(如排序、搜索、填充、比较等)。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 排序(sort) 对数组进行升序…...

归并排序:分治思想的高效排序
目录 基本原理 流程图解 实现方法 递归实现 非递归实现 演示过程 时间复杂度 基本原理 归并排序(Merge Sort)是一种基于分治思想的排序算法,由约翰冯诺伊曼在1945年提出。其核心思想包括: 分割(Divide):将待排序数组递归地分成两个子…...