webpack5(一)

什么是webpack

webpack是一个静态资源打包工具,它会以一个或者多个文件作为打包的入口,将整个项目的所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件,可以在浏览器端运行。一般将 webpack 输出的文件称为 bandle 。

webpack 本身的功能也是有限的,一共有两种模式:

开发模式:仅能编译js中 ES Module 语法。
生产模式:可以编译js中 ES Module 语法,还可以压缩 js 代码。
 

为什么需要打包工具

开发时,一般会使用框架、ES6模块化语法、css预处理器等语法进行开发,这样的代码如果想在浏览器运行必须经过编译,成为浏览器能识别的 js、css 等语法后才能运行。
打包工具就是用来编译代码的。同时还可以压缩代码、做兼容性处理、提升代码性能等。

目前一些常用的打包工具:

Grunt、Gulp、Parcel、Webpack、Vite 等等。

npm 和  npx

npm是用来下载包的

npx 是将node_modules文件夹中的 .bin 目录临时添加为环境变量,这样就可以访问该环境变量下的应用程序

npx的作用如下:

1.默认情况下,首先检查路径中是否存在要执行的包(即在项目中);

2.如果存在,它将执行;

3.若不存在,意味着尚未安装该软件包,npx将安装其最新版本,然后执行它;

假设有一个名为my-package的软件包,想要执行它。

好吧,若没有npx,要执行一个软件包,必须通过其本地路径运行来完成,如下所示:

./node_modules/bin/my-package

或在 package.json文件的 scripts section中将其定义为单独的脚本,如下所示:

{"name":"something","version": "1.0.0","scripts": {"my-package":"./node_modules/bin/my-package"}
}

然后使用npm run my-package运行。

现在,运用npx,只需运行npx my-package.,即可轻松实现此目的。

webpack的配置有哪些?核心概念?

webpack有5大核心概念:

1. entry(入口)指示Webpack从哪个文件开始打包。
2. output(输出)指示Webpack打包完的文件输出到哪里,如何命名等。
3. loader(加载器)webpack本身只能处理 js、json等资源,其他资源需要借助 loader 才能解析。
4. plugins(插件)扩展webpack的功能。
5. mode(模式)开发和生产两种模式 development/production。

⚠️注意:output 中的 path 是全部文件的输出路径;但 filename指的只是入口文件输出后的路径。
clean:true,设置打包前清空

webpack.config.js 文件:

const path = require("path") //固定写法 node中的核心模块,专门用来处理路径问题//依赖于node中的common.js模块化
module.exports = {//入口entry:'./src/main.js',//相对路径//出口 文件的输出路径 一个对象 包含路径和文件名output:{// __dirname node.js中的变量 用来表示当前文件的文件夹目录path:path.resolve(__dirname,'dist'),//绝对路径filename:'main.js',clean:true,//自动清空上次打包的内容,其实就是在打包前,将整个path目录进行清空,再打包},//loader 加载器module:{rules:[//loader的配置],},//plugin 插件plugins:[//plugin的配置],//模式mode:'development'//或 production
}

 什么是开发模式

如何处理样式资源 

如果需要webpack进行打包,那么必须在入口文件进行引入。

css/less/sass/stylus 都有自己对应的loader,不同的是,如果使用预处理器,预处理器的loader会先将预处理器处理为css文件,然后再继续执行,即将css代码编译成commonjs模块放入js,再将js中的css文件通过创建style标签的方式加入到html中。

1.npm install 需要下载的loader
2.配置方式/内联方式(不推荐)

在webpack.config.js中进行配置:

module.exports = {module: {rules: [{ test: /\.css$/, //只检测.css文件//执行顺序为从右到左,从下至上use: ['style-loader',//将js中css文件通过创建style标签添加到html中生效'css-loader'//将css代码编译为common.js模块放到js中]},],},
};

3.将需要打包的资源在入口文件引入。

如何进行图片和字体图标处理

webpack4 中通过 file-loader 和 url-loader 进行图片资源的处理,但是在 webpack5 中,已经将两个 loader 内置到 webpack 中了,只需要简单配置。

项目中的图片优化:
习惯将小于10kb的图片转换为base64(DataUri),减少请求,减轻服务器压力。
对于过大的图片,不适合转为base64,因为转为base64文件体积会变大,越大的图片增加的体积越大,导致整体页面的加载速度变慢。

module.exports = {module: {rules: [{ test: /\.(png|jpg|gif)$/, //需要查看的图片后缀type:"asset",parser:{dataUrlCondition:{//小于10kb的图片转换为base64maxSize:10*1024,//10kb},],},
};

处理字体图标资源

此时不需要进行 base64 的转换,type 类型也是 asset 下的 resource

module.exports = {module: {rules: [{ test: /\.(ttf|woff2?)$/, //需要查看的图片后缀type:"asset/resource",//也是可以设置generator的值generator:{filename:"static/media/[hash]/[ext]/[query]",}],},
};

怎样操作输出文件的打包目录

当我们希望打包出来的文件不是全部堆砌在.dist目录下,希望进行 js/image 的分级目录时:

output中更改 js 输出后的文件路径:

output:{path:path.resolve(__dirname,'dist'),//绝对路径filename:'static/js/main.js',},

module下 rule 中和 asset 同级定义generator

module: {rules: [{ test: /\.(png|jpg|gif)$/, //需要查看的图片后缀type:"asset",parser:{dataUrlCondition:{//小于10kb的图片转换为base64maxSize:10*1024,//10kb},generator:{//输出的图片名称//hash指的是打包完成后,图片会被打包为一串字母数字,此值即为hash值,//hash值如果觉得太长可以设置为[hash:10],为只取前十位//ext 指的是文件后缀名filename:"static/image/[hash]/[ext]/[query]",}],},

此时,.dist目录下会有一个static文件夹,static文件夹下有两个文件夹,js文件夹下是打包好的入口文件,image文件夹下是打包好的图片资源。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/109373.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux操作系统--网络配置(2)

在上一次课程中,我们对Linux课程中的网络有了一个了解,下面我们来看看如何配置网络IP。 1.配置网络IP地址 在Linux操作系统中,比如搭建集群,这一个时候如果使用DHCP实现动态IP的分配,那么如果需要访问管理其中一个节点操作时候,就需要通过其IP访问。这一个时候还得去查看…

RabbitMQ死信队列

RabbitMQ死信队列 1、过期时间TTL 过期时间TTL表示可以对消息设置预期的时间,在这个时间内都可以被消费者接收获取;过了之后消息将自动被 删除。RabbitMQ可以对消息和队列设置TTL,目前有两种方法可以设置: 第一种方法是通过队列…

广汽埃安,新能源扛把子?继比亚迪、理想之后实现正“盈利”

根据广汽集团日前披露的2023年半年度报告,广汽埃安在今年的六七月份连续两个月实现盈利,成为继比亚迪、理想之后,第三家实现盈利的国产新能源汽车品牌。这一成绩进一步表明广汽埃安在国内新能源汽车市场的竞争力以及其持续增长的势头。报告显…

PHP教学资源管理系统Dreamweaver开发mysql数据库web结构php编程计算机网页

一、源码特点 PHP 教学资源管理系统是一套完善的web设计系统,对理解php编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。 源码 https://download.csdn.net/download/qq_41221322/88260480 论文 https://downl…

Matlab图像处理-减法运算

减法运算 图像减法也称为差分方法,是一种常用于检测图像变化及运动物体的图像处理方法。常用来检测一系列相同场景图像的差异,其主要的应用在于检测同一场景下两幅图像之间的变化或是混合图像的分离。 差影法 将同一景物在不同时问拍摄的图像或同一景…

MATLAB软件安装包分享(附安装教程)

目录 一、软件简介 二、软件下载 一、软件简介 MATLAB是Matrix Laboratory的缩写,是一款由美国MathWorks公司开发的商业数学软件。它主要用于进行数值计算、数据分析、可视化、算法开发、模拟仿真等多个领域。MATLAB具有高度的灵活性和开放性,可以为用…

Flink流批一体计算(18):PyFlink DataStream API之计算和Sink

目录 1. 在上节数据流上执行转换操作,或者使用 sink 将数据写入外部系统。 2. File Sink File Sink Format Types Row-encoded Formats Bulk-encoded Formats 桶分配 滚动策略 3. 如何输出结果 Print 集合数据到客户端,execute_and_collect…

水库大坝安全监测的主要内容包括哪些?

在水库大坝的实时监测中,主要任务是通过无线传感网络监测各个监测点的水位、水压、渗流、流量、扬压力等数据,并在计算机上用数据模式或图形模式进行实时反映,以掌握整个水库大坝的各项变化情况。大坝安全监测系统能实现全天候远程自动监测&a…

ruoyi-vue-plus 配置邮箱

ruoyi-vue-plus 配置邮箱 📔 千寻简笔记介绍 千寻简笔记已开源,Gitee与GitHub搜索chihiro-notes,包含笔记源文件.md,以及PDF版本方便阅读,且是用了精美主题,阅读体验更佳,如果文章对你有帮助请…

当我焦虑时,我从CSDN的博主身上学到了什么?

文章目录 前言一、思考为什么会产生差距1.1 懒惰1.2 没有合理的规划学习时间 二、我该如何做?2.1 认真生活规律作息2.2 做事就是0和1 结语 前言 我们在学习的过程当中总会遇到一些比我们自己优秀的人,不论你是在更好的985或211院校学习,还是…

Netty-01-快速掌握Java NIO

文章目录 一、从传统I/O到Java NIO二、NIO 三大组件1. Channel(通道)1.1. FileChannel1.1.1. 获取 FileChannel1.1.2. FileChannel 读取 文件1.1.3. FileChannel写⽂件1.1.4. 通道之前传输数据-transferFrom1.1.5. 通道之前传输数据-transferTo 1.2. Soc…

学习Linux基础知识与命令行操作

开始学习Linux系统前,首先要掌握计算机基础知识,了解硬件、操作系统、文件系统、网络和安全等概念。对这些基础知识的了解能够帮助理解Linux系统的概念和功能。 在Linux系统中,文件和目录是数据管理的基本单位。每个文件和目录都有一个称为&…

Unity实现倒计时和获取系统时间

一:创建UGUI 1.创建Canvas画布组件,调节Canvas画布的分辨率等其他设置。我们可以把视图设置为2D模式下。 2.创建Text文本组件,取名为Timer计时器,我们调整Text文本组件的大小,用锚点设置Text文本组件的位置,并且设置好Text文本组件的颜色。 3.我们再创建一个Text文…

Matlab怎么引入外部的latex包?Matlab怎么使用特殊字符?

Matlab怎么引入外部的latex包?Matlab怎么使用特殊字符? Matlab怎么使用特殊字符?一种是使用latex方式,Matlab支持基本的Latex字符【这里】,但一些字符需要依赖外部的包,例如“𝔼”,需…

android2022配置opencv4android480

1,安装android studio2022。 2,下载OPENCV4ANDROID,解压到任意盘中。 3,File->New->New Project,选择Empty Views Activity。再选择语言,本文选择JAVA。 4,File->New->Import Modu…

Kotlin数据结构

数据结构基础 什么是数据结构 在计算机科学中,数据结构(Data Structure)是计算机中存储、组织数据的方式。数据结构是各种编程语言的基础。 一些使用场景 不同的数据结构适用于不同的应用场景。比如HashMap与ConcurrentHashMap&#xff0…

(四)k8s实战-服务发现

一、Service 1、配置文件 apiVersion: v1 kind: Service metadata:name: nginx-svclabels:app: nginx-svc spec:ports:- name: http # service 端口配置的名称protocol: TCP # 端口绑定的协议,支持 TCP、UDP、SCTP,默认为 TCPport: 80 # service 自己的…

Apache StreamPark系列教程第二篇——项目打包和开发

一、项目打包 项目依赖maven、jdk8.0、前端(node、npm) //下载代码 git clone//maven打包相关内容 mvn -N io.takari:maven:wrapper //前端打包相关内容 curl -sL https://rpm.nodesource.com/setup_16.x | bash - yum -y install nodejs npm -v npm install -g pnpm默认是h2…

河湖长制综合管理信息平台建设项目总体设计方案[507页Word]

导读:原文《河湖长制综合管理信息平台建设项目总体设计方案[507页Word]》(获取来源见文尾),本文精选其中精华及架构部分,逻辑清晰、内容完整,为快速形成售前方案提供参考。 部分内容: 1.1.1.3…

【Docker】云原生利用Docker确保环境安全、部署的安全性、安全问题的主要表现和新兴技术产生

前言 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux或Windows操作系统的机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口。 云原生利用Docker确保环境安全、部署的…