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

Day11-Webpack前端工程化开发

Webpack

一 webpack基本概念

遇到问题

开发中希望将文件分开来编写,比如CSS代码,可以分为头部尾部内容,公共的样式。

JS代码也希望拆分为多个文件,分别引入,以后代码比较好维护。

本地图片,希望可以实现小图片不用访问后端,保存在前端代码中就可以了

运行程序时我们希望你的文件越少越好,外部资源少了,减少对服务器访问次数。

比如JS我们希望项目只有一个,加载一次就可以。

CSS代码我们希望你项目只有一个,加载一次就可以

开发和最终运行代码产生了冲突?我们可以用Webpack解决这个冲突

概念

webpack是前端静态模块打包器,可以将我们错综复杂的文件,按照指定的规则打包成我们最终要部署的程序。

它主要有如下作用

  • 构建前端工程化的项目
  • 对源代码进行打包,得到最终要运行的代码

image-20230123181837608

webpack能够实现:

  • 将代码中所有JS依赖关系,打包后生成一个JS文件。最终引入到HTML代码中
  • 将所有的CSS依赖关系,打包生成一个CSS文件,最终引入HTML代码中
  • scss代码,可以直接编译生成css,以后写的scss代码,不用easy scss编译。
  • 图片打包。大图片正常的打包放在项目中,小图片通过base64编码的方式保存在代码中。

通过webpack打包后的项目 体积更小、文件变的更少

二 图片的base64编码

项目中的图片,可以是文件的形式存在,也可以是base64编码的方式存在

我们将一张图片转化为base64编码,浏览器能直接识别这个编码。

在线转码网站:https://base64.us/

如果图片不是../d链接,而是用base64编码,浏览器不会去服务器加载图片,而是直接解析代码。效率会更高。

base64编码适合于小图片,图片越大,base64编码解析结果越大,影响网页的性能

三webpack项目环境搭建

(1)创建一个项目,并初始化项目

npm init -y

(2)在项目中安装webpack工具

npm install webpack --save-dev
npm install webpack-cli --save-dev

webpack:webpack的核心文件

webpack-cli:webpack的脚手架工具,利用他可以实现项目打包

—save-dev代表开发环境依赖.webpack只有在开发过程中才会使用,项目打包后就不用了

(3)下载服务器插件

npm i webpack-dev-server --save-dev

webpack-dev-server:webpack内置了一个服务器,可以通过这个来启动项目

(4)安装合并js的插件

npm i webpack-merge --save-dev

(5)下载项目启动插件

npm i cross-env --save-dev

(6)下载html打包插件

npm i html-webpack-plugin -D

-D就表示 —save-dev的意思

(7)下载CSS打包插件

npm i mini-css-extract-plugin style-loader -D
npm install css-loader@5.2.6 -D

mini-css-extract-plugin:这个插件用于打包CSS的插件,以后如果遇到index.js中import引入了CSS代码,我们就会启动这个插件来处理代码。

css-loader:解析CSS源代码

style-loader:解析CSS样式代码

(8)下载SCSS打包插件

npm i sass-loader -D
npm i node-sass@4.14.1 --sass_binary_site=https://npm.taobao.org/mirrors/node-sass -D

node-sass这个包需要单独使用淘宝镜像下载

(9)下载图片打包插件

npm install url-loader file-loader html-withimg-loader -D

url-loader :打包检测文件路径

file-loader:打包图片文件

html-withimg-loader:针对html网页中img图片打包

css-loader版本需要降低为5.2.6,否定背景图片和img标签打包生成两个文件

(10) 下载静态文件打包插件

项目中有些文件不参与打包。不参与打包的文件在打包过程中,原封不动复制到打包后的代码中。

npm i copy-webpack-plugin -D

四 搭建Webpack项目结构

(1)创建webpack配置文件

开发环境 程序开发时的环境,代码提示友好,代码格式规范.报错信息明确
生产环境 线上运行的环境, 积小\代码压缩\减少输出,代码中不要console.log

我们可以在项目的根目录下面创建三个文件

image-20230227150958731

webpack.dev.config.js --->开发环境配置文件
webpack.prod.config.js --->生产环境的配置文件
webpack.base.config.js --->公共配置文件

开发环境和生产环境相同的代码,写在base文件中

开发环境自己特有配置dev这个文件

生产环境特有配置写在prod这个文件

(2)创建项目目录

前端工程化项目的标准目录结构

image-20230607144929944

五 webpack配置文件信息

webpack.base.config.js

const path = require("path")
const HtmlWebpackPlugin =  require("html-webpack-plugin")
const MiniCssExtractPlugin =  require("mini-css-extract-plugin")
const webpack = require("webpack")
const CopyWebp

相关文章:

Day11-Webpack前端工程化开发

Webpack 一 webpack基本概念 遇到问题 开发中希望将文件分开来编写,比如CSS代码,可以分为头部尾部内容,公共的样式。 JS代码也希望拆分为多个文件,分别引入,以后代码比较好维护。 本地图片,希望可以实现小图片不用访问后端,保存在前端代码中就可以了 运行程序时我…...

什么是函数式编程,应用场景是什么

什么是函数式编程,应用场景是什么 函数式编程和面向对象编程一样,是一种编程规范。强调执行的过程而非结果,通过一系列的嵌套的函数调用,完成一个运算过程。它主要有以下几个特点: 1.函数是"一等公民"&…...

Vue3之路由认识

回顾: 原来的vue2路由是通过this. r o u t e 和 t h i s . route和this. route和this.router来控制的。现在vue3有所变化,useRoute相当于以前的this. r o u t e ,而 u s e R o u t e r 相当于 t h i s . route,而useRouter相当于t…...

P1775 石子合并(弱化版)(内附封面)

石子合并(弱化版) 题目描述 设有 N ( N ≤ 300 ) N(N \le 300) N(N≤300) 堆石子排成一排,其编号为 1 , 2 , 3 , ⋯ , N 1,2,3,\cdots,N 1,2,3,⋯,N。每堆石子有一定的质量 m i ( m i ≤ 1000 ) m_i\ (m_i \le 1000) mi​ (mi​≤1000)。…...

jmeter之接口测试(http接口测试)

基础知识储备 一、了解jmeter接口测试请求接口的原理 客户端--发送一个请求动作--服务器响应--返回客户端 客户端--发送一个请求动作--jmeter代理服务器---服务器--jmeter代理服务器--服务器 二、了解基础接口知识: 1、什么是接口:前端与后台之间的…...

webpack基础知识二:说说webpack的构建流程?

一、运行流程 webpack 的运行流程是一个串行的过程,它的工作流程就是将各个插件串联起来 在运行过程中会广播事件,插件只需要监听它所关心的事件,就能加入到这条webpack机制中,去改变webpack的运作,使得整个系统扩展…...

PHP使用PhpSpreadsheet实现导出Excel时带下拉框列表 (可支持三级联动)

因项目需要导出Excel表 需要支持下拉 且 还需要支持三级联动功能 目前应为PHPExcel 不在维护,固采用 PhpSpreadsheet 效果如图: 第一步:首先 使用composer 获取PhpSpreadsheet 我这里PHP 版本 7.4 命令如下: composer r…...

Openssh高危漏洞CVE-2023-38408修复方案

0x01 漏洞简述 2023年07月21日,360CERT监测发现OpenSSH发布了OpenSSH的风险通告,漏洞编号为CVE-2023-38408,漏洞等级:高危,漏洞评分:8.1。 OpenSSH 是 Secure Shell (SSH) 协议的开源实现,提供…...

Android中的ContentProvider

Android中的ContentProvider 在Android中,ContentProvider是四大组件之一,用于在不同应用程序之间共享和管理数据。它提供了一种标准化的方式来访问和管理应用程序的数据,使得多个应用程序可以安全地共享数据,而无需直接访问彼此…...

if device is None and isinstance(net, torch.nn.Module):的含义?

这段代码的含义是,如果变量 device 为 None 并且 net 是 torch.nn.Module 的实例,那么执行后续的代码块。 解释一下其中的几个部分: device:这是一个代表设备的变量,通常用于指定在哪个设备上执行模型的计算&#xff…...

C++如何用OpenCV中实现图像的边缘检测和轮廓提取?

最近有个项目需要做细孔定位和孔距测量,需要做边缘检测和轮廓提取,先看初步效果图: 主要实现代码: int MainWindow::Test() {// 2.9 单个像素长度um 5倍double dbUnit 2.9/(1000*5);// 定义显示窗口namedWindow("src"…...

智慧水务和物联网智能水表在农村供水工程中的应用

摘 要:随着社会的进步和各项事业的飞速发展,人民生活水平的逐步提升,国家对农村饮水安全有了更高的要求,为了进一步提升农村供水服务的质量,利用现代化、信息化科学技术提升农村供水服务质量,提高用水管理效…...

机器学习笔记 - 了解 GitHub Copilot 如何通过提供自动完成式建议来帮助您编码

一、GitHub Copilot介绍 GitHub Copilot 是世界上第一个大规模 AI 开发人员工具,可以帮助您以更少的工作更快地编写代码。GitHub Copilot 从注释和代码中提取上下文,以立即建议单独的行和整个函数。 研究发现 GitHub Copilot 可以帮助开发人员更快地编码、专注于解决更大的问…...

《数据同步-NIFI系列》Nifi配置DBCPConnectionPool连接SQL Server数据库

Nifi配置DBCPConnectionPool连接SQL Server数据库 一、新增DBCPConnectionPool 在配置中新增DBCPConnectionPool,然后配置数据库相关信息 二、配置DBCPConnectionPool 2.1 DBCPConnectionPool介绍 主要介绍以下五个必填参数 Database Connection URL&#xff1…...

HarmonyOS/OpenHarmony元服务开发-卡片使用自定义绘制能力

ArkTS卡片开放了自定义绘制的能力,在卡片上可以通过Canvas组件创建一块画布,然后通过CanvasRenderingContext2D对象在画布上进行自定义图形的绘制,如下示例代码实现了在画布的中心绘制了一个笑脸。 Entry Component struct Card { private c…...

SpringBoot引入MyBatisGenerator

1.引入插件 <plugin><groupId>org.mybatis.generator</groupId><artifactId>mybatis-generator-maven-plugin</artifactId><version>1.3.5</version><configuration><!--generator配置文件所在位置--><configuratio…...

JVM面试题--实践

目录 JVM 调优的参数可以在哪里设置参数值 war包部署在tomcat中设置 jar包部署在启动参数设置 JVM 调优的参数都有哪些&#xff1f; 设置堆空间大小 虚拟机栈的设置 年轻代中Eden区和两个Survivor区的大小比例 年轻代晋升老年代阈值 设置垃圾回收收集器 JVM 调优的工…...

神经网络的搭建与各层分析

为什么去西藏的人都会感觉很治愈 拉萨的老中医是这么说的 缺氧脑子短路&#xff0c;很多事想不起来&#xff0c;就会感觉很幸福 一、卷积层 解释&#xff1a;卷积层通过卷积操作对输入数据进行处理。它使用一组可学习的滤波器&#xff08;也称为卷积核或特征检测器&#xff09…...

SQL-每日一题【1174. 即时食物配送 II】

题目 配送表: Delivery 如果顾客期望的配送日期和下单日期相同&#xff0c;则该订单称为 「即时订单」&#xff0c;否则称为「计划订单」。 「首次订单」是顾客最早创建的订单。我们保证一个顾客只会有一个「首次订单」。 写一条 SQL 查询语句获取即时订单在所有用户的首次订…...

MySQL学习记录:第一章 DQL语言

文章目录 第一章 查询语言,DQL语言一、基础查询1、查询表中单个字段2、查询表中多个字段3、查询表中所有字段4、查询常量值5、查询表达式6、查询函数7、起别名8、去重9、+号的作用二、条件查询1、按条件表达式筛选2、按逻辑表达式筛选三、模糊查询四、排序查询五、常见函数1、…...

深度学习从心电信号中解码呼吸频率:原理、实现与临床价值

1. 项目概述&#xff1a;从心电信号中“听”到呼吸声呼吸频率&#xff0c;这个我们每分钟都在进行却很少被精确量化的生命体征&#xff0c;在临床医学中扮演着至关重要的角色。它不仅是评估呼吸系统功能的直接指标&#xff0c;更是反映全身代谢、循环乃至神经系统状态的“窗口”…...

51单片机驱动ST7735S彩屏避坑指南:从5秒刷屏到流畅贪吃蛇的优化实战

51单片机驱动ST7735S彩屏性能优化实战&#xff1a;从卡顿到流畅游戏的蜕变之路当一块128x160分辨率的ST7735S彩屏遇上传统的51单片机&#xff0c;这种组合看似矛盾却又充满挑战。许多开发者初次尝试时会发现&#xff0c;原本在STM32等平台上运行流畅的显示驱动&#xff0c;移植…...

从Gamma函数到泊松分布:一个概率论中的含参量积分实用案例解析

Gamma函数与泊松分布&#xff1a;概率论中的数学之美 在数据科学和机器学习的实践中&#xff0c;概率分布构成了建模的基石。当我们深入探究这些分布背后的数学原理时&#xff0c;Gamma函数以其优雅的性质和广泛的应用脱颖而出。它不仅连接了离散与连续概率世界&#xff0c;更在…...

2026年,本地精准营销高性价比服务商来袭,你还不了解一下?

在本地商业竞争日益激烈的2026年&#xff0c;实体店面临着诸多挑战&#xff0c;引流难、成本高、复购率低等问题困扰着众多商家。而中粤&#xff08;广州&#xff09;信息科技有限公司作为本地精准营销的高性价比服务商&#xff0c;正以其独特的优势和卓越的服务&#xff0c;为…...

Burp Suite深度解析:从流量抓包到业务逻辑漏洞挖掘

1. 这不是“学个插件”——Burp Suite 是渗透测试的呼吸系统 很多人第一次听说 Burp Suite&#xff0c;是在某篇“三步拿下登录框”的速成教程里&#xff1a;装好Java、拖进浏览器代理、点几下Repeater就弹出密码明文。结果真去测一个中型SaaS后台&#xff0c;不到十分钟就卡在…...

从开题到定稿零焦虑:okbiye AI 论文写作,帮你把毕业季的 “大山” 变成坦途

okbiye-免费查重复率aigc检测/开题报告/毕业论文/智能排版/文献综述/AI PPT毕业论文 - Okbiye智能写作https://www.okbiye.com/ai/bylw 毕业季的深夜&#xff0c;宿舍台灯下的屏幕亮着刺眼的光&#xff0c;文档里的字数停留在三位数&#xff0c;而 deadline 正一天天逼近。你是…...

如何快速定制Office界面:终极开源工具使用指南

如何快速定制Office界面&#xff1a;终极开源工具使用指南 【免费下载链接】office-ribbonx-editor An overhauled fork of the original Custom UI Editor for Microsoft Office, built with WPF 项目地址: https://gitcode.com/gh_mirrors/of/office-ribbonx-editor O…...

WarcraftHelper:让魔兽争霸3在现代电脑上完美运行的关键插件

WarcraftHelper&#xff1a;让魔兽争霸3在现代电脑上完美运行的关键插件 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 你是否还在为《魔兽争霸3》这…...

昇腾CANN elec-ops-simulation 实战:电力系统仿真——潮流计算与暂态稳定分析在 NPU 上的加速

电力系统仿真&#xff1a;500 节点电网的牛顿-拉夫逊潮流计算 → 解 10001000 稀疏雅可比矩阵&#xff08;每迭代 1 次矩阵求逆&#xff09;→ CPU 迭代 15 次 2.4s。实时调度要求 < 100ms → NPU 加速&#xff1a;雅可比矩阵求解用 Cube 单元做批量小矩阵 LU 分解 → 每迭…...

Awoo Installer:让Switch游戏安装变得简单高效的终极解决方案

Awoo Installer&#xff1a;让Switch游戏安装变得简单高效的终极解决方案 【免费下载链接】Awoo-Installer A No-Bullshit NSP, NSZ, XCI, and XCZ Installer for Nintendo Switch 项目地址: https://gitcode.com/gh_mirrors/aw/Awoo-Installer 厌倦了繁琐的Switch游戏安…...