当前位置: 首页 > news >正文

Webpack基础使用

目录

一.什么是Webpack

二.为什么要使用Webpack

三.Webpack的使用 

1.下载yarn包管理器

2.Webpack的安装

 3.Webpack的简单使用

4.效果

 四.Webpack打包流程


一.什么是Webpack

Webpack是一个静态模块打包工具

二.为什么要使用Webpack

在开发中,我们常常会遇到:

  • 使用sass和less语法书写样式需要转译
  • 使用es6及更高版本的语法来简化代码,浏览器无法识别
  • 项目体积大,不利于上线

webpack就可以解决上述问题:

  • 支持所有类型文件的打包
  • 支持less/sass => css
  • 支持ES6/7/8 => ES5
  • 压缩代码, 提高加载速度

由此可见,webpack就是前端开发人员技术库中的必需品

三.Webpack的使用 

在使用前需要安装node环境

1.下载yarn包管理器

npm i -g yarn

2.Webpack的安装

首先创建项目文件夹并在项目文件夹内初始化包环境

yarn init -y

安装 webpack 依赖包

 yarn add webpack webpack-cli -W -D

在 package.json 中, 配置 scripts 自定义打包命令

scripts: {"build": "webpack"
}

 3.Webpack的简单使用

新建 src/js.js ,写入并导出需要打包的代码,例如:

export const add = (a, b) => a + b

新建 src/index.js 导入使用 

// webpack打包的入口
import { add } from './js'
console.log(add(2, 3));

运行自定义打包命令

yarn build

4.效果

生成 dist 目录(与src文件夹同级)和其中的 main.js 文件

(()=>{"use strict";console.log(5)})();

 四.Webpack打包流程

  • 解析配置文件:Webpack 会读取并解析配置文件(通常是 webpack.config.js 文件),并根据配置生成一个 Compiler 对象
  • 读取入口文件:Webpack 根据配置中的入口文件,读取这些文件及其依赖的模块,并将它们组成一个依赖图
  • 解析模块依赖:Webpack 会根据模块之间的依赖关系,递归地解析它们的依赖,直到所有的依赖都被解析完毕
  • 加载模块:Webpack 会根据模块的路径,使用相应的 Loader 加载模块的源代码,并将其转换为 Webpack 可以处理的形式。
  • 转换代码:Webpack 会根据配置中的插件,对加载的模块进行一系列的转换操作,比如压缩、合并、优化等
  • 生成代码:Webpack 会将所有模块转换后的代码合并成一个或多个文件,并输出到指定的输出目录中

相关文章:

Webpack基础使用

目录 一.什么是Webpack 二.为什么要使用Webpack 三.Webpack的使用 1.下载yarn包管理器 2.Webpack的安装 3.Webpack的简单使用 4.效果 四.Webpack打包流程 一.什么是Webpack Webpack是一个静态模块打包工具 二.为什么要使用Webpack 在开发中,我们常常会遇到…...

扭蛋机小程序搭建:打造互联网“流量池”

随着互联网科技的发展,扭蛋机小程序成为了市场发展的重要力量。 扭蛋机市从日本发展流行起来的,玩法就是根据设置的概率,让玩家体验扭蛋机的乐趣。扭蛋机中有隐藏款和稀有款,为了获得稀有款商品,玩家便会进行扭蛋&…...

解决VNC连接Ubuntu服务器打开终端出现闪退情况

服务器环境 阿里云ECS服务器 操作系统:Ubuntu 20.0.4 如何使用VNC连接阿里云ECS服务器 1.阿里云官方指导:通过VNC搭建Ubuntu 18.04和20.04图形界面 2.新手入门ECS——ubuntu 20.04安装图形化界面和本地VNC连接 问题描述 使用VNC连接上新申请阿里云服…...

flutter是什么

“flutter” 是一种移动应用开发框架,由谷歌开发和维护。Flutter 可用于构建高性能、美观且跨平台的移动应用程序,它支持同时在多个平台上运行,包括: iOS:可以构建原生的iOS应用。 Android:可以构建原生的…...

GET和POST请求

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、GET请求二、POST请求三.幂等性是什么总结 前言 GET和POST是HTTP协议中的两种常见的请求方法,它们定义了客户端与服务器之间进行通信时的不同方…...

基于电商场景的高并发RocketMQ实战-Broker写入读取流程性能优化总结、Broker基于Pull模式的主从复制原理

🌈🌈🌈🌈🌈🌈🌈🌈 【11来了】文章导读地址:点击查看文章导读! 🍁🍁🍁🍁🍁🍁&#x1f3…...

前端DApp开发利器,Ant Design Web3 正式发布 1.0

在介绍 Ant Design Web3 之前,先简单说说 Web3 DApp(去中心化应用)。DApp 可以说是除了 AI 应用外当下最受前端独立开发者青睐的应用了。当然,在 ChatGPT 还没有火的时候,Web3 DApp 才是最火的。因为通过一个连接区块链的 DApp(去中心化应用)你可以获得如下能力: 💰交…...

[RoarCTF 2019]Easy Java(java web)

题目 页面如下 页面长得像sql注入 点击help看一下 这里需要了解java web目录结构 WEB INF:Java的web应用安全目录; 此外如果想在页面访问WEB-INF应用里面的文件,必须要通过web.xml进行相应的映射才能访问; WEB-INF是Java Web应用程序中的一…...

Abaqus许可管理策略

随着全球化和数字化的发展,知识产权和许可管理成为了企业成功的关键因素之一。在这样的背景下,Abaqus许可管理策略应运而生,为企业提供了一个全面、灵活和可扩展的解决方案,帮助企业掌控业务许可,实现增长与合规。 Ab…...

对采集到的温湿度数据,使用python进行数据清洗,并使用预测模型进行预测未来一段时间的温湿度数据。

使用Python对传感器采集到的数据进行数据清洗和预测未来一段时间的温湿度数据,您可以按照以下步骤进行操作: 导入必要的库 import pandas as pd import numpy as np from sklearn.model_selection import train_test_split from sklearn.linear_model …...

嵌入式SOC之通用图像处理之OSD文字信息叠加的相关实践记录

机缘巧合 机缘巧合下, 在爱芯元智的xx开发板下进行sdk的开发.由于开发板目前我拿到是当前最新的一版(估计是样品),暂不公开开发板具体型号信息.以下简称板子 .很多优秀的芯片厂商,都会提供与开发板配套的完善的软件以及完善的技术支持(FAE),突然觉得爱芯…...

Java日期工具类LocalDateTime

Java日期工具类LocalDateTime 嘚吧嘚LocalDateTime - API创建时间获取年月日时分秒增加时间减少时间替换时间日期比较 嘚吧嘚 压轴的来了,个人感觉LocalDateTime是使用频率最高的工具类,所以本篇像文章详细研究说明一下🧐。 如果看了Java日期…...

从C到C++1

一.思想过渡 前言:明确地说,学了C语言就相当于学了 C 的一半,从C语言转向 C 时,不需要再从头开始,接着C语言往下学就可以,所以我强烈建议先学C语言再学 C。 1.面向过程与面向对象 ​ 从“学院派”的角度来…...

[Angular] 笔记 18:Angular Router

Angular Router 视频 chatgpt: Angular 具有内置的大量工具、功能和库,功能强大且经过良好设计,如组件化架构、依赖注入、模块化系统、路由和HTTP客户端等。这些功能可以直接用于项目中,无需额外的设置或第三方库。这简化了开发流…...

微服务全链路灰度方案介绍

目录 一、单体架构下的服务发布 1.1 蓝绿发布 二、微服务架构下的服务发布 三、微服务场景下服务发布的问题 四、全链路灰度解决方案 4.1 物理环境隔离 4.2 逻辑环境隔离 4.3 全链路灰度方案实现技术 4.3.1 标签路由 4.3.2 节点打标 4.3.3 流量染色 4.3.4 分布式链路…...

低代码开发OA系统 低代码平台如何搭建OA办公系统

随着企业业务的复杂化和信息化的推进,如何快速、高效地构建一个适应企业发展需求的OA系统成为许多企业关注的焦点。本文将介绍低代码开发在构建OA系统方面的优势,并以白码低代码平台为例,探讨其在实际应用中的价值和功能。 什么是低代码开发?…...

构建Python的Windows整合包教程

构建Python的Windows整合包教程 原文链接:https://blog.gcc.ac.cn/post/2023/buildpythonwindowsintegrationpackagetutorial/ 构建Python的Windows整合包教程 - 我的博客原文链接 前言 之前的开源项目本地素材搜索有很多人想要Windows整合包,因为Wi…...

《整机柜服务器通用规范》由OCTC正式发布!浪潮信息牵头编制

近日,中国电子工业标准化技术协会开放计算标准工作委员会(OCTC)正式批准发布了《整机柜服务器通用规范》,该标准由浪潮信息牵头,中国工商银行、中国质量认证中心、英特尔、中国计量科学研究院等十余家单位联合编制&…...

Linux:修改和删除已有变量

变量修改 变量的修改有以下几种方式: 变量设置方式说明${变量名#匹配字串}从头向后开始匹配,删除符合匹配字串的最短数据${变量名##匹配字串}从头向后开始匹配,删除符合匹配字串的最长数据${变量名%匹配字串}从尾向前开始匹配,删除符合匹配…...

【23.12.29期--Spring篇】Spring的 IOC 介绍

介绍一下Spring的IOC ✔️引言✔️ lOC的优点✔️Spring的IOC✔️ 拓展知识仓✔️IOC是如何实现的? ✔️引言 所谓的IOC (inversion of control) ,就是控制反转的意思。何为控制反转? 在传统的程序设计中,应用程序代码通常控制着对象的创建和…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行,YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID: YW3…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 (部分有免费额度&#x…...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象,只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意:它移动的位置必须是相连的有内容的单元格…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域,向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能,能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作,并通过具体…...

深度学习水论文:mamba+图像增强

🧀当前视觉领域对高效长序列建模需求激增,对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模,以及动态计算优势,在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内,就有不…...

FFmpeg:Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】,注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录(即exe所在文件夹)加入系统变量…...

安卓基础(Java 和 Gradle 版本)

1. 设置项目的 JDK 版本 方法1:通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分,设置 Gradle JDK 方法2:通过 Settings File → Settings... (或 CtrlAltS)…...

深度剖析 DeepSeek 开源模型部署与应用:策略、权衡与未来走向

在人工智能技术呈指数级发展的当下,大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性,吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型,成为释放其巨大潜力的关键所在&…...

小木的算法日记-多叉树的递归/层序遍历

🌲 从二叉树到森林:一文彻底搞懂多叉树遍历的艺术 🚀 引言 你好,未来的算法大神! 在数据结构的世界里,“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从 二叉树 开始入门的,它…...

WebRTC调研

WebRTC是什么,为什么,如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...