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

认识什么是Webpack

目录

1. 认识Webpack

1.1. 什么是Webpack?(定义)

1.2. 使用Webpack

1.2.1. 需求

1.2.2. 步骤

1.3. 入口和出口默认值

1.3.1. 需求代码如下

2. 修改Webpack打包入口和出口

2.1. 步骤:

2.2. 注意

3. Webpack自动生成html文件

3.1. 插件 html-webpack-plugin

3.2. 步骤

 4. Webpack打包css代码

4.1. 加载器 css-loader

4.2. 加载器 style-loader

4.3. 步骤


 

1. 认识Webpack

1.1. 什么是Webpack?(定义)

静态模块:指的是编写代码过程中的,html,css,js,图片等固定内容的文件

打包:把静态模块内容,压缩,整合,转译等(前端工程化)

把 less / sass 转成 css 代码

把 ES6+ 降级成 ES5

支持多种模块标准语法

1.2. 使用Webpack

1.2.1. 需求
  • 封装 utils 包,校验手机号长度和验证码长度,在 src/index.js 中使用并打包观察
1.2.2. 步骤

  • 新建并初始化项目,编写业务源代码
  • 下载 webpack webpack-cli 到当前项目中(版本独立)

npm i webpack webpack-cli --save

  • 配置局部自定义命令

  • 运行打包命令,自动产生 dist 分发文件夹(压缩和优化后,用于最终运行的代码)

npm run build

1.3. 入口和出口默认值

  • 入口的默认值是'./src/index.js'
  • 出口的默认值是'./dist/main.js'
1.3.1. 需求代码如下

// 封装校验手机号长度和校验验证码长度的函数
export const checkPhone = phone => phone.length === 11
export const checkCode = code => code.length === 6
/*** 目标1:体验 webpack 打包过程*/
// 1.1 准备项目和源代码
import { checkPhone, checkCode } from './utils/check.js'
console.log(checkPhone('13900002020'))
console.log(checkCode('123123123123'))
// 1.2 准备 webpack 打包的环境
// 1.3 运行自定义命令打包观察效果(npm run 自定义命令)
{"name": "test01","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack"},"keywords": [],"author": "","license": "ISC","devDependencies": {"webpack": "^5.91.0","webpack-cli": "^5.1.4"}
}

 

2. 修改Webpack打包入口和出口

2.1. 步骤:

  • 项目根目录,新建 webpack.config.js 配置文件
  • 导出配置对象,配置入口,出口文件的路径
  • 重新打包观察

2.2. 注意

  • 只有和入口产生直接/间接的引入关系,才会被打包

在出口output对象里面添加属性——clean: true  //生成打包后内容之前,清空输出目录

 

3. Webpack自动生成html文件

3.1. 插件 html-webpack-plugin

  • 在 Webpack 打包时生成 html 文件

3.2. 步骤

  • 下载 html-webpack-plugin 本地软件包

npm i html-webpack-plugin --save-dev

  • 配置 webpack.config.js 让 Webpack 拥有插件功能

  • 重新打包观察效果

 

 4. Webpack打包css代码

注意:

Webpack 默认只识别 js 代码

把css文件要跟入口文件产生引入关系

4.1. 加载器 css-loader

  • 解析 css 代码

4.2. 加载器 style-loader

  • 把解析后的 css 代码插入到 DOM

4.3. 步骤

  • 准备 css 文件代码引入到 src/login/index.js 中(压缩转译处理等)
  • 下载 css-loader 和 style-loader 本地软件包

npm i css-loader style-loader --save-dev

  • 配置 webpack.config.js 让 Webpack 拥有该加载器功能

  • 打包后观察效果

 

相关文章:

认识什么是Webpack

目录 1. 认识Webpack 1.1. 什么是Webpack?(定义) 1.2. 使用Webpack 1.2.1. 需求 1.2.2. 步骤 1.3. 入口和出口默认值 1.3.1. 需求代码如下 2. 修改Webpack打包入口和出口 2.1. 步骤: 2.2. 注意 3. Webpack自动生成html文件 3.1.…...

vulhub打靶记录——healthcare

文章目录 主机发现端口扫描FTP—21search ProPFTd EXPFTP 匿名用户登录 web服务—80目录扫描search openemr exp登录openEMR 后台 提权总结 主机发现 使用nmap扫描局域网内存活的主机,命令如下: netdiscover -i eth0 -r 192.168.151.0/24192.168.151.1…...

css实现更改checkbox的样式;更改checkbox选中后的背景色;更改checkbox选中后的icon

<input class"check-input" type"checkbox"> .check-input {width: 16px;height: 16px;} /* 设置默认的checkbox样式 */input.check-input[type"checkbox"] {-webkit-appearance: none; /* 移除默认样式 */border: 1px solid #999;outl…...

绿联 安装Mysql数据库

绿联 安装Mysql数据库 1、镜像 mysql:5.7 数据库5.7.x系列。 mysql:8 数据库8.x.x系列&#xff0c;安装方式相同。 2、安装 2.1、拉取镜像 拉取5.7.x版本的镜像。 2.2、基础设置 重启策略&#xff1a;第三或第四项均可。 2.3、网络 桥接即可。 2.4、命令 在原有的“mys…...

PyQt ui2py 使用PowerShell将ui文件转为py文件并且将导入模块PyQt或PySide转换为qtpy模块开箱即用

前言 由于需要使用不同的qt环境&#xff08;PySide&#xff0c;PyQt&#xff09;所以写了这个脚本&#xff0c;使用找到的随便一个uic命令去转换ui文件&#xff0c;然后将导入模块换成qtpy这个通用库(支持pyside2-6&#xff0c;pyqt5-6)&#xff0c;老版本的是Qt.py(支持pysid…...

javascript中的浅拷贝和深拷贝

浅拷贝&#xff1a;拷贝的是引用类型数据的第一层&#xff1a;数组或者对象&#xff1a;的地址 深拷贝&#xff1a;通过不断的递归进行拷贝 原理普及&#xff1a;在js中引用类型的变量储存的时候引用类型数据的地址&#xff0c;因此当地址被重新赋值新的对象的时候&#xff…...

vue 实现自定义分页打印 window.print

首先这里是我自定义了打印界面才实现的效果&#xff0c;如果不用自定义界面实现&#xff0c;应该是一样的吧。具体可能需要自己去试试看 我的需求是界面有两个表格&#xff0c;点击全部打印&#xff0c;我需要把第一表格在打印是第1页&#xff0c;第二个表格是第二页 如图&…...

基于 Erlang 的随机账户分配机制

当你在网上注册新账户时&#xff0c;平台如何为你生成一个独特的用户名或编号呢&#xff1f;这背后其实有一套精心设计的系统。本文将带你了解一种使用 Erlang 语言开发的随机账户分配系统&#xff0c;它既快速又可靠。 ## 随机分配的简单步骤 我们可以将这个过程想象成一个装…...

数码论坛系统的设计与实现|Springboot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)电子科技数码爱好者交流信息新闻畅聊讨论评价

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读300套最新项目持续更新中..... 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含ja…...

时序预测 | Matlab实现CPO-LSTM【24年新算法】冠豪猪优化长短期记忆神经网络时间序列预测

时序预测 | Matlab实现CPO-LSTM【24年新算法】冠豪猪优化长短期记忆神经网络时间序列预测 目录 时序预测 | Matlab实现CPO-LSTM【24年新算法】冠豪猪优化长短期记忆神经网络时间序列预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现CPO-LSTM【24年新算法】…...

探索设计模式的魅力:AI大模型如何赋能C/S模式,开创服务新纪元

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 AI大模型如何赋能C/S模式&#xff0c;开创服务新纪元 数字化飞速发展的时代&#xff0c;AI大模型…...

2024年NAND价格市场继续上涨

TrendForce发布了最新的NAND闪存市场价格走势预测。根据其报告&#xff0c;在2024年第二季度&#xff0c;NAND闪存合同价格将进一步呈现两位数的增长&#xff0c;叠加前一季度的增长。不过&#xff0c;客户端SSD的价格涨幅预计在第二季度将不超过15%&#xff0c;相比于2024年第…...

分布式算法 - ZAB算法

ZAB算法是用于实现分布式系统中的原子广播的核心算法&#xff0c;它被广泛应用于ZooKeeper分布式协调服务中。 ZAB算法由两个主要阶段组成&#xff1a;崩溃恢复阶段和消息广播阶段。 在崩溃恢复阶段&#xff0c;当一个ZooKeeper节点启动或者领导者节点崩溃重启时&#xff0c;…...

Java设计之道:色即是空,空即是色

0.引子 我们的这个世界上&#xff0c;存在这么一种东西&#xff1a; 第一&#xff1a;它不占据任何3D之体积&#xff0c;即它没有Volume第二&#xff1a;它也不占据任何2D之面积&#xff0c;即它没有Area第三&#xff1a;它也不占据任何1D之长度&#xff0c;即它没有Length 总…...

深度学习:基于PyTorch的模型解释工具Captum

深度学习&#xff1a;基于PyTorch的模型解释工具Captum 引言简介示例安装解释模型的预测解释文本模型情绪分析问答 解释视觉模型特征分析特征消融鲁棒性 解释多模态模型 引言 当我们训练神经网络模型时&#xff0c;我们通常只关注模型的整体性能&#xff0c;例如准确率或损失函…...

公司官网怎么才会被百度收录

在互联网时代&#xff0c;公司官网是企业展示自身形象、产品与服务的重要窗口。然而&#xff0c;即使拥有精美的官网&#xff0c;如果不被搜索引擎收录&#xff0c;就无法被用户发现。本文将介绍公司官网如何被百度收录的一些方法和步骤。 1. 创建和提交网站地图 创建网站地图…...

机器学习模型——SVM(支持向量机)

基本概念&#xff1a; Support Vector Machine &#xff08;支持向量机&#xff09;: 支持向量&#xff1a;支持或支撑平面上把两类类别划分开来的超平面的向量点。 机&#xff1a;一个算法 SVM是基于统计学习理论的一种机器学习方法。简单地说&#xff0c;就是将数据单元…...

服务器CPU使用过高的原因

大多使用服务器的站长都会碰见这样的问题&#xff0c;在长时间使用后&#xff0c;系统越来越慢&#xff0c;甚至出现卡死或强制重启的情况。打开后台 才发现&#xff0c;CPU使用率已经快要到达90%。那么&#xff0c;我告诉你哪些因素会导致服务器CPU高使用率&#xff0c;从而严…...

基于tensorflow和kereas的孪生网络推理图片相似性

一、环境搭建 基础环境&#xff1a;cuda 11.2 python3.8.13 linux ubuntu18.04 pip install tensorflow-gpu2.11.0 验证&#xff1a;# 查看tensorflow版本 import tensorflow as tf tf.__version__ # 是否能够成功启动GPU from tensorflow.python.client import device_lib pr…...

day4|gin的中间件和路由分组

中间件其实是一个方法&#xff0c; 在.use就可以调用中间件函数 r : gin.Default()v1 : r.Group("v1")//v1 : r.Group("v1").Use()v1.GET("test", func(c *gin.Context) {fmt.Println("get into the test")c.JSON(200, gin.H{"…...

Spring Boot Helper插件免费版获取与版本适配全攻略

1. 为什么我们需要Spring Boot Helper插件 作为一个常年使用IntelliJ IDEA开发Spring Boot项目的程序员&#xff0c;我深刻体会到这个插件的重要性。简单来说&#xff0c;它就像是Spring Boot开发的"瑞士军刀"&#xff0c;能帮我们快速创建项目、自动配置依赖、一键…...

ECharts Gallery弃用后,这4个替代网站让你轻松搞定数据可视化(附优缺点对比)

ECharts Gallery弃用后&#xff0c;这4个专业级替代方案深度评测 当ECharts官方Gallery宣布停止维护时&#xff0c;许多数据可视化开发者突然失去了一个重要的灵感来源和代码参考平台。作为国内最流行的可视化库之一&#xff0c;ECharts的生态系统中其实还隐藏着多个高质量的替…...

Atomics探究(四)-- atomic flag

本篇将研究atomic_flag相关函数底层汇编指令,以及与其他原子操作函数进行比较,探讨其存在的意义。 1、标准描述: 2、定义 gcc 头文件中定义如下 typedef _Atomic struct { #if __GCC_ATOMIC_TEST_AND_SET_TRUEVAL == 1_Bool __val; #elseunsigned char __val; #endif } at…...

简述双亲委派机制以及其优点

面试 概念&#xff1a;加载类的时候先交给自己的父类加载器执行&#xff0c;直到顶层的启动类加载器&#xff0c;如果父加载器能够完成加载&#xff0c;则交给父类加载器&#xff0c;否则自己尝试加载。 优点&#xff1a;保证类的加载的安全性&#xff0c;避免类的重复加载。...

图解DySAT:5张信息图带你吃透动态图表示学习的自注意力机制

动态图神经网络DySAT&#xff1a;用自注意力机制捕捉时空演化的5个关键视角 当我们在社交网络上关注好友动态时&#xff0c;既会注意不同朋友间的关联强度&#xff08;谁和谁互动更密切&#xff09;&#xff0c;也会追踪这些关系随时间的变化模式&#xff08;某段关系何时变得亲…...

H3C交换机堆叠配置实战:从零开始搭建企业级网络环境

H3C交换机堆叠配置实战&#xff1a;从零开始搭建企业级网络环境 在中小型企业的网络架构中&#xff0c;交换机堆叠技术正逐渐成为简化管理、提升可靠性的标配方案。想象一下&#xff0c;当你的机房需要扩容时&#xff0c;不再需要逐台配置新交换机&#xff0c;所有设备如同一个…...

基于春联生成模型的Python爬虫数据采集与内容生成系统

基于春联生成模型的Python爬虫数据采集与内容生成系统 用技术传承文化&#xff0c;让AI助力创作 1. 项目背景与价值 春节是中国人最重要的传统节日&#xff0c;而春联则是春节文化中不可或缺的一部分。每年春节&#xff0c;家家户户都会贴上新的春联&#xff0c;表达对新年的美…...

保姆级教程:用Coze零代码打造一个能聊天的微信公众号机器人(附服务器配置避坑指南)

零基础玩转Coze&#xff1a;从智能体创建到微信公众号部署全指南 在数字化营销日益重要的今天&#xff0c;拥有一个能24小时响应客户需求的智能客服已成为许多企业的标配。但对于没有技术背景的运营和市场人员来说&#xff0c;开发一个功能完善的聊天机器人似乎遥不可及。Coze平…...

若依框架单点登录!!!

一、不分离版在application.yml设置maxSession为1即可。修改shiro的配置shiro:session:# 同一个用户最大会话数&#xff0c;比如2的意思是同一个账号允许最多同时两个人登录&#xff08;默认-1不限制&#xff09;maxSession: 1# 踢出之前登录的/之后登录的用户&#xff0c;默认…...

如何用掩码生成蒸馏(MGD)提升小模型性能?实战ResNet-18到ImageNet分类

掩码生成蒸馏实战&#xff1a;如何让ResNet-18在ImageNet上提升1.8%准确率 在模型轻量化的浪潮中&#xff0c;知识蒸馏技术正经历着从简单模仿到特征重构的范式转变。当我们用ResNet-50这样的"大模型"指导ResNet-18等"小模型"训练时&#xff0c;传统方法往…...