如何对Webpack进行优化
目录
1.优化-提取css代码
1.1. 插件 mini-css-extract-plugin
1.2. 步骤:
1.3. 注意
1.4. 好处
1.5. 练习
2. 优化-css代码提取后压缩
2.1. 问题引入
2.2. 解决
2.3. 步骤
3. Webpack打包less代码
3.1. 加载器 less-loader
3.2. 步骤
3.3. 注意:
4. Webpack打包图片
4.1. 资源模块
4.2. 步骤
3. 注意
1.优化-提取css代码
1.1. 插件 mini-css-extract-plugin
- 提取 css 代码
1.2. 步骤:
- 下载 mini-css-extract-plugin 本地软件包
npm i mini-css-extract-plugin --save-dev
- 配置 webpack.config.js 让 Webpack 拥有该插件功能
- 打包后观察效果
1.3. 注意
- 不能和 style-loader 一起使用
- 提取的css代码没有被压缩
1.4. 好处
- css 文件可以被浏览器缓存,减少 js 文件体积
1.5. 练习
//引入模块
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')module.exports = {//入口entry: path.resolve(__dirname,'src/login/index.js'),//出口output: {path: path.resolve(__dirname, 'dist'),filename: './login/index.js',clean: true //生成打包后内容之前,清空输出目录},//插件(给 Webpack 提供更多功能)plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname,'public/login.html'), //模板文件filename: path.resolve(__dirname,'dist/login/index.html') //输出文件}),new MiniCssExtractPlugin() //生成 css文件],// 加载器(让 webpack 识别更多模块文件内容)module: {rules: [{test: /\.css$/i, //匹配以.css结尾的文件,并且忽视大小写 use: [MiniCssExtractPlugin.loader ,"css-loader"] //从后-前进行使用},],},
};
2. 优化-css代码提取后压缩
2.1. 问题引入
- css 代码提取后没有压缩
2.2. 解决
- 使用 css-minimizer-webpack-plugin 插件
2.3. 步骤
- 下载 css-minimizer-webpack-plugin 本地软件包
npm i css-minimizer-webpack-plugin --save-dev
- 配置 webpack.config.js 让 webpack 拥有该功能
- 打包重新观察
3. Webpack打包less代码
3.1. 加载器 less-loader
- 把 less 代码编译为 css 代码
3.2. 步骤
- 新建 less 代码(设置背景图)并引入到 src/login/index.js 中
- 下载 less 和 less-loader 本地软件包
npm i less less-loader --save-dev
- 配置 webpack.config.js 让 Webpack 拥有功能
- 打包后观察效果
3.3. 注意:
- less-loader 需要配合 less 软件包使用
4. Webpack打包图片
4.1. 资源模块
- Webpack5 内置资源模块(字体,图片等)打包,无需额外 loader
4.2. 步骤
- 配置 webpack.config.js 让 Webpack 拥有打包图片功能
占位符 【hash】对模块内容做算法计算,得到映射的数字字母组合的字符串
占位符 【ext】使用当前模块原本的占位符,例如:.png / .jpg 等字符串
占位符 【query】保留引入文件时代码中查询参数(只有 URL 下生效)
- 打包后观察效果和区别
3. 注意
- 判断临界值默认为 8KB
大于 8KB 文件:发送一个单独的文件并导出 URL 地址
小于 8KB 文件:导出一个 data URI(base64字符串)
相关文章:
如何对Webpack进行优化
目录 1.优化-提取css代码 1.1. 插件 mini-css-extract-plugin 1.2. 步骤: 1.3. 注意 1.4. 好处 1.5. 练习 2. 优化-css代码提取后压缩 2.1. 问题引入 2.2. 解决 2.3. 步骤 3. Webpack打包less代码 3.1. 加载器 less-loader 3.2. 步骤 3.3. 注意…...
nut-ui中的menu 菜单组件的二次封装
这个菜单组件 一般可以直接用到项目里 如果复用性不强的话 直接使用 但是有一个问题 如果很多地方都需要用到这个组件 我们可以把这个组件二次封装一下 <template><div class"cinema-search-filter-component"><nut-menu><template #icon>&…...
python笔记(11)序列
Python中的“序列”是一个广义术语,用于描述一种特定的数据结构,它具备以下共同特征: 有序性:序列中的元素按照特定的顺序排列,每个元素在序列中都有一个确定的位置,即索引。 索引访问:通过索引…...
Rust egui(4) 增加自己的tab页面
如下图,增加一个Sins也面,里面添加一个配置组为Sin Paraemters,里面包含一个nums的参数,范围是1-1024,根据nums的数量,在Panel中画sin函数的line。 demo见:https://crazyskady.github.io/index.…...
小组分享第二部分:Jsoup
1.Jsoup是什么: 是HTML的解析器,可以解析URL地址,HTML的文本内容,可以使用DOM,CSS以及类似Jquery的操作方法来操作数据 2.Jsoup的作用 1.通过URL或者文件或者字符串获取到HTML页面并解析 2.使用DOM或CSS等操作来对数据进行操作 3.可以操作HT…...
C#(winform) 调用MATLAB函数
测试环境 VisualStudio2022 / .NET Framework 4.7.2 Matlab2021b 参考:C# Matlab 相互调用 Matlab 1、编写Matlab函数 可以没有任何参数单纯定义matlab处理的函数,输出的数据都存在TXT中用以后期读取数据 function [result,m,n] TEST(list) % 计算…...
Kubernetes探索-Pod面试(补充)
针对上篇文章"kubernetes探索-Pod面试"做一点点补充... 1. 简述Pod的删除流程 1) kube-apiserver接收到用户的删除指令,默认等待30s(优雅退出时间),随后认为pod已死亡,将其标记为Terminating状态; 2) kubelet监控到pod…...
深入了解JUnit 5:新一代Java单元测试框架
深入了解JUnit 5:新一代Java单元测试框架 近年来,Java领域的单元测试框架发展迅速,而JUnit 5作为JUnit系列的最新版本,为开发人员提供了更多的功能和灵活性。在本文中,我们将介绍JUnit 5,并探讨其与JUnit 4…...
2024年清明节安装matlab 2024a
下载安装离线支持包SupportSoftwareDownloader_R2024a_win64,地址https://ww2.mathworks.cn/support/install/support-software-downloader.html,运行软件(自解压运行),登录账号(需要提前在官网注册&#x…...
关于PostgreSQL JDBC中的log输出是怎么回事?
微信公众号:数据库杂记 个人微信: _iihero 我是iihero. 也可以叫我Sean. iihero@CSDN(https://blog.csdn.net/iihero) Sean@墨天轮 (https://www.modb.pro/u/16258) 数据库领域的资深爱好者一枚。SAP数据库技术专家与架构师,PostgreSQL ACE. 水木早期数据库论坛发起人db2@…...
【科研笔记】知识星球不可选择内容爬虫
知识星球不可选择内容爬虫 1 背景2 实现3 拓展遗留问题1 背景 针对与知识星球中,电脑打开网页不可选择复制粘贴的问题,进行爬虫处理,获取网页的内容,并保存在本地 2 实现 需要下载python,和爬虫的第三方库selenium,可以查看博客中有关selenium的内容进行回顾。当前使用…...
[技术闲聊]我对电路设计的理解(二)
第一篇文章 [技术闲聊]我对电路设计的理解(一),看着是述说着应届生如何对待一份工作,其实也是我在过往以及以目前视野看过往的事情,自己的一种态度。谦虚,是一个不可多得的词汇,因为刚起步,学习的东西很多&…...
【Android、 kotlin】kotlin学习笔记
基本语法 fun main(){val a2var b "Hello"println("$ (a - 1} $b Kotlin!")} Variables 只赋值一次用val read-only variables with val 赋值多次用var mutable variables with var Standard output printin() and print() functions String templ…...
Debian 配置国内软件源
为什么需要? Debian安装好之后默认是没有软件源的,只能通过本身的光盘上的软件进行安装,这样明显是不能够满足我们的需要的,考虑到国内的上网速度以及环境,配置一个国内的阿里镜像源是最好的选择。 使用 sudo vim /…...
选数(dfs,isprime)
题目:P1036 [NOIP2002 普及组] 选数 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) #include<bits/stdc.h> using namespace std; int n,k; int a[22]; long long ans; bool isprime(int n){for(int i2;i<sqrt(n);i){if(n%i0) return false;…...
RocketMQ(版本4.9.4)+RocketMQ_Dashbord环境搭建(生产者、消费者的前置环境搭建)
一、官方网站下载 RocketMQ源码包 https://rocketmq.apache.org/zh/docs/4.x/introduction/02quickstart 二、把rocketMQ上传到Linux环境下解压,编译,执行以下命令(需要提前装jdk和maven并配置好环境变量) unzip rocketmq-all-4…...
css隐藏溢出隐藏的滚动条
msOverflowStyle: none: 这个属性用于在 Internet Explorer 浏览器中定义滚动条的样式。将其设置为 none 可以隐藏滚动条。 scrollbarWidth: none: 这个属性用于定义滚动条的宽度。将其设置为 none 可以隐藏滚动条。这个属性在一些新的浏览器中被支持,如 Firefox。…...
scss常用混入(mixin)、@inclue
mixin和inclue的基本使用 mixin混入可以用于定义重复使用的样式,比如下面CSS代码 .header {display: flex;justify-content: center;align-items: center;width: 500px;height: 100px; }.footer {display: flex;justify-content: center;align-items: center;width…...
补代码随想录算法训练营第44天 | 完全背包、518. 零钱兑换 II 、377. 组合总和 Ⅳ
完全背包 视频讲解:带你学透完全背包问题! 和 01背包有什么差别?遍历顺序上有什么讲究?_哔哩哔哩_bilibili https://programmercarl.com/%E8%83%8C%E5%8C%85%E9%97%AE%E9%A2%98%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%80%E5%AE%8C%E5…...
【Linux】网络基础常识{OSI七层模型/ TCP/IP / 端口号 /各种协议}
文章目录 1.网络常识1.0DHCP协议1. 1IP地址/MAC地址/ARP协议是什么?IP/MACARP:IP ⇒ MAC 1.2手机连接wifi的原理 SSID与BSSID手机连接wifiSSID与BSSID 1.3手机如何通过“数据/流量”上网?1.4电脑连接wifi的原理?电脑通过热点上网…...
python--面向对象编程和类的定义,对象的创建
一、面向对象简介 1、什么是面向对象 面向对象是一种编程思想,把数据和对数据的多个操作方法封装在一起组成类,这样通过这个类创建出来的对象,就可以直接调用这些方法了。 2、面向对象相关的术语 类:用来描述具有相同的属性和方法的对象的…...
nssm 工具把asp.net core mvc变成 windows服务,使用nginx反向代理访问
nssm工具的作用:把项目部署成Windows服务,可以在系统后台运行 1.创建一个asp.net core mvc的项目weblication1 asp.net core mvc项目要成为windows服务需要安装下面的nuget包 <ItemGroup><PackageReference Include"Microsoft.Extension…...
String Encryptor custom Bean not found with name ‘jasyptStringEncryptor‘...
项目采用 spring boot 2.6.13 jasypt-spring-boot-starter 3.0.5 apollo-client 1.6.0 自定义jasyptStringEncryptor,服务器上启动死活报找不到bean jasyptStringEncryptor,采用默认的,密文配置项自然解密失败导致服务无法启动。 经过一…...
FastAPI+React全栈开发14 FastAPI如何开发REST接口
Chapter03 Getting Started with FastAPI 14 How does FastAPI speak REST FastAPIReact全栈开发14 FastAPI如何开发REST接口 Let’s create a minial FastAPI application, a classic Hello World example, and start examining how FastAPI structures the endpoints. I u…...
在 DDD 中,如何处理领域对象的持久化?
在 DDD 中,领域对象的持久化工作通常是通过仓库 Repository 和工厂 Factory 实现的。仓库是一种用于访问领域对象的机制。他负责将领域对象从内存中保存到持久存储,如数据库中,以及从持久存储中检索领域对象。而工厂则负责从持久存储中组装领…...
centos 如何安装nvidia-container-runtime
在CentOS上安装nvidia-container-runtime,首先需要确保你的系统已经安装了NVIDIA的驱动和docker。以下是安装步骤: 确保Docker已安装: sudo yum install -y yum-utils sudo yum-config-manager --add-repo https://download.docker.com/lin…...
非写代码无以致远
标题党一下,本篇文章主要汇总了一些代码题,让大家写一些代码练习一下吧! 变种水仙花_牛客题霸_牛客网 (nowcoder.com) #include<stdio.h> int main() {for (int i 10000; i < 99999; i) {int sum 0;for (int j 10; j < 1000…...
刷题之Leetcode34题(超级详细)
34. 在排序数组中查找元素的第一个和最后一个位置 力扣链接(opens new window)https://leetcode.cn/problems/find-first-and-last-position-of-element-in-sorted-array/ 给定一个按照升序排列的整数数组 nums,和一个目标值 target。找出给定目标值在数组中的开始…...
从0到1构建uniapp应用-store状态管理
背景 在 UniApp的开发中,状态管理的目标是确保应用数据的一致性,提升用户体验,并简化开发者的工作流程。通过合理的状态管理,可以有效地处理用户交互、数据同步和界面更新等问题。 此文主要用store来管理用户的登陆信息。 重要…...
Uinx线程详解
目录 一.什么是线程? 并发(Concurrency) 并行(Parallelism) 1.1 线程的概念 1.2 线程的基本函数 1.3 线程的基本使用例子: 二.线程的属性 2.1线程属性使用例子 三.线程互斥 3.1互斥锁 3.2互斥锁常用函…...
网站建设ag/百度广告运营
在 https://www.cnblogs.com/mengyu/p/6759671.html 的启示下,解决了乱码问题,在此向作者表示感谢。 至此,困扰我几天的乱码问题和退出问题都解决了,只是处理速度上有点遗憾。 下面是新代码,较原代码多出了两句 rsp.en…...
莆田seo快速排名/seo分析报告
前言 很多人都知道读取配置文件,这是初级做法,上升一点难度是使用java bean的方式读取自定义配置文件,但是大家很少有知道读取pom文件信息,接下来我都会讲到。 正文 笔者还是基于Spring Boot :: (v1.5.8.RELEASE)&#…...
兴平网站建设/百度云客服人工电话
类似于驾校考试的考试系统 使用到的是数据库表名为: yhks(用户考试)表,yhkstm(用户考试题目)表,kemu(科目)表,shititimu(试题题目)表,xuanxiang(选…...
河北pc端网站建设/搜索引擎优化培训班
源代码: Lib/telnetlib.pytelnetlib模块提供了实现Telnet协议的Telnet类。有关协议的详细信息,请参阅RFC 854。此外,它还为协议字符(参见下面)和telnet选项提供了符号常量。telnet选项的符号名称遵循arpa/telnet中的定义。h,前导端末端被删除…...
产品设计大师作品/windows优化大师怎么下载
据说还是个MM, 写得很通俗易懂, 还很诙谐, 原文:http://dallascao.com/cn/iptables-tutorial-for-newbies/ 对于斗胆开始玩vps的文科生来讲,iptables简直是地狱中的地狱。有几家vps供应商系统默认是带着些iptables规则的,以前我一向是难言之隐࿰…...
企业网站找私人做什/百度快照优化排名
博客:http://www.jcodecraeer.com/plus/view.php?aid3828转载于:https://blog.51cto.com/7183397/1851017...