webpack5基础和开发模式配置

运行环境           nodejs16+

webpack基础

webpack打包输出的文件是bundle

打包就是编译组合

webpack本身功能

仅能编译js文件

开始使用

基本配置

五大核心概念

准备webpack配置文件

1.在根目录

2.命名为webpack.config.js

开发模式介绍

处理样式资源

处理css样式资源文件

因为webpack只能处理js文件

所以要想通过webpack打包css文件则需要在配置文件中引进load

查看官方文档永远是进步最快的方式

Loaders | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)

webpack官方文档中查看load

1.要处理资源首先要创建资源并引入在入口文件

在src文件夹下创建css文件夹下创建css文件

查看文档

安装响应依赖

3.在load中写配置

在加载器模块中的rules数组中加load配置对象

 loader中use中数组的执行顺序:从右至左,从上到下

webpackload文档有个毛病,它有时没有安装让所有依赖

 处理less资源

创建less文件

入口文件引入

安装依赖

config 加载器配置更改

rules中load的配置

添加数组前的关键字为use可以添加多个loader,loader只能添加一个loader

处理Sass和Scss资源

安装依赖后

添加config加载器配置

sass和scss对应的都是sass文件,

只是两种命名,区别是里面的写法不太一样

sass文件命名可以省略括号和分号

处理Styl(一种预处理器)资源

 

创建文件

styl  更简洁

入口文件引入

样式资源打包流程

当webpack不识别资源时,通过load加载

样式资源而言,最常用的load是“style-loader”和“css-loader”

其他的预处理器资源 都需要借助loader将预处理器文件编译成css文件

处理图片资源

图片文档:直接搜索:asset

base64优化

修改打包资源的路径        希望不同的资源打包后去向不同的目录

输出的js文件放在dist下的一个js文件夹下

入口文件打包输出文件名         使js文件放在dist下的一个js文件夹下

filename:"static/js/main.js"

图片输出文件位置存放的设置方法在asset文档下

图片输出文件存放位置的设置在config中的图片配置设置中

hash:哈希值

ext:文件拓展名

query:其他参数      url中的查询参数

自动清空上次打包内容

处理字体图标资源

阿里巴巴字体图标库iconfont的使用

在素材库中选择需要的字体图标加入购物车

在购物车中选择添加至项目 并创建新项目

在新项目中选择下载至本地并进行解压

加压后打开demo-index.html(这个文件会显示字体图标的三个用法,兼容性最强是Unicode,使用用法最简单是Font class)

注意将css文件引入项目后,font字体文件也要引入项目

并且要将css文件中的font字体文件目录进行修改

webpack中字体图标的使用

改变字体图标文件的输出路径,则需要进行配置

type:“asset”会将小于某个大小的文件转化为base64字符串

字体图标文件不需要

处理其他资源

处理js资源

Eslint

vue语法的支持需要用到插件

配置文件(最重要)

具体配置过多,掌握基本的,需要查文档

指定语法环境

规则设置方式

规则文档 规则参考 - ESLint - 插件化的 JavaScript 代码检查工具

继承规则

使用eslint

plugin插件中

找到EslintWebpackPlugin模块

插件需要引用才能使用

1.官网查找安装下载插件配置写入

2.创建eslint配置文件

番外:vscode的插件          eslint

自动检测js文件是否符合规范

如果想要对一些文件取消这个插件的使用  创建.eslintignore 文件内写入文件夹名即可

Babel用法

在webpack中使用babel

官方文件

在webpack中文文档的loader中

babel-loader | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)

webpack配置文件中load设置

预设可以写这里面,也可以写babel的配置文件中(易于修改)

配置文件写在webpack配置文件外面易于进行修改

处理html资源

使html文件能够自动引入js资源

官方文件

HtmlWebpackPlugin | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)

下载

在webpack配置文件引入模块 

再将插件设置进行修改

自动化

目标:源代码修改后,打包文件自动改变

省去手动重新打包的步骤

下载包

配置

此时指令变为:npx webpack server

 

开发服务器:不会输出资源,在内存中编译打包

此时dist包下不会生成打包后的文件,但页面效果是存在的 

开发环境下配置总结

24-基础-总结开发模式配置_哔哩哔哩_bilibili

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

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

相关文章

算法-可完成的最大任务数

一解析: 为了尽可能多的完成任务,充分利用时间,越早越好,所以从项目开启的那一天起就开始做任务,一直做到项目结束为止。 但是,对于第i天来说,若可执行的任务有多个,该如何选择&am…

C语⾔:内存函数

1. memcpy使⽤和模拟实现(对内存块的复制,不在乎类型) void * memcpy ( void * destination, const void * source, size_t num ); • 函数memcpy从source的位置开始向后复制num个字节的数据到destination指向的内存位置。 • 这个函数在遇…

3D Slicer:从入门到精通——数据模块之DICOM

DICOM 文章目录 DICOM概述DICOM简介Slicer DICOM数据库DICOM插件 如何操作创建DICOM数据库将DICOM文件读入场景DICOM导入DICOM加载 从DICOM数据库中删除数据将数据从场景导出到DICOM数据库将数据从场景导出到DICOM文件DICOM网络传输DICOMweb网络传输 查看DICOM元数据 面板及其用…

指定目录匹配文件并批量导入

需求描述: 1,需要从某个目录以某种正则表达式匹配到所有文件 2,将这些文件批量上传 3,上传完成后需要返回上传的地址 1,引入依赖 <!-- 测试 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter…

R实验 参数估计

实验目的&#xff1a; 掌握矩法估计与极大似然估计的求法&#xff1b;了解估计量的优良性准则&#xff1a;无偏性、有效性、相合性&#xff08;一致性&#xff09;&#xff1b;学会利用R软件完成一个正态总体均值和两个正态总体均值差的区间估计&#xff1b;学会利用R软件完成…

NiuCloud-Admin-SAAS:引领前端技术革新与SaaS应用快速开发的未来

一、引言 在数字化快速发展的今天&#xff0c;企业对于快速搭建、高效运营的SaaS&#xff08;Software-as-a-Service&#xff09;系统的需求日益增长。为满足这一需求&#xff0c;NiuCloud-Admin-SAAS作为一款快速开发SaaS通用管理系统后台框架&#xff0c;凭借其先进的技术栈…

基于Java实现震中附近风景区预警可视化分析实践

目录 前言 一、空间数据说明 1、表结构信息展示 2、空间范围查询 二、Java后台开发实现 1、模型层设计与实现 2、控制层设计与实现 三、Leaflet地图开发 1、地震震中位置展示 2、百公里风景区列表展示 3、风景区列表展示 4、附近风景区展示 四、总结 前言 地震这类…

【区块链】webase-front

因为WeBASE是基于Java开发的&#xff0c;故依赖于Java运行环境&#xff0c;支持版本JDK 8至JDK 14。 我们安装JDK 8。在Linux终端中&#xff0c;使用如下命令安装开源版本JDK 8 apt update apt install -y openjdk-8-jdk 安装JDK8后&#xff0c;需要设置JAVA_HOME环境变量&am…

链表mark

什么是链表&#xff0c;链表是一种通过指针串联在一起的线性结构&#xff0c;每一个节点由两部分组成&#xff0c;一个是数据域一个是指针域&#xff08;存放指向下一个节点的指针&#xff09;&#xff0c;最后一个节点的指针域指向null&#xff08;空指针的意思&#xff09;。…

[数智人文实战] 02.舆情分析之词云可视化、文本聚类和LDA主题模型文本挖掘

【数智人文与文本挖掘】知识星球建立且正式运营,欢迎新老博友和朋友加入,一起分享更多数智人文知识和交流进步。该星球计划每周至少分享7个资源或文章,包括数智人文、文本挖掘、人工智能、大数据分析和图书情报的技术文章、代码及资源。同时,欢迎进入星球的朋友咨询我图情和…

Java开发错误经验积累

业务平时积累 为什么用StringUtils来判断字符串是否为空 在 Java 中,当一个字符串为 null 时,调用它的方法会出现空指针异常。例如: String str = null; if (str.isEmpty()) {// ... }在上面的示例中,由于 str 为 null,调用它的 isEmpty() 方法会出现空指针异常。 为了…

操作系统课程实验1-进程调度模拟实验

操作系统课程实验1-进程调度模拟实验 一、实验介绍 1.1 实验目的 本实验模拟在单处理机环境下的处理机调度&#xff0c;帮助理解进程调度的概念&#xff0c;深入了解进程控制块的功能&#xff0c;以及进程的创建、撤销和进程各个状态间的转换过程。 1.2 实验内容 进程调度算…

NDIS小端口驱动开发(一)

在四种NDIS相关的驱动中&#xff0c;微型端口驱动(也经常翻译为为小端口驱动)位于驱动栈的底部&#xff0c;一般将它理解为NIC设备的驱动程序&#xff1a; 有几种类型的微型端口驱动程序类型&#xff1a; 无连接微型端口驱动程序用于控制无连接网络媒体 &#xff0c;如以太网的…

【量算分析工具-方位角】GeoServer改造Springboot番外系列六

【量算分析工具-概述】GeoServer改造Springboot番外系列三-CSDN博客 【量算分析工具-水平距离】GeoServer改造Springboot番外系列四-CSDN博客 【量算分析工具-水平面积】GeoServer改造Springboot番外系列五-CSDN博客 【量算分析工具-方位角】GeoServer改造Springboot番外系列…

题解:CF1968F(Equal XOR Segments)

题解&#xff1a;CF1968F&#xff08;Equal XOR Segments&#xff09; 题目翻译&#xff1a;定义一个序列是好&#xff0c;当且仅当可以将其分成大于 1 1 1 份&#xff0c;使得每个部分的异或和相等。现在给定一个长度为 n n n 的序列 a a a&#xff0c;以及 q q q 次查询…

redis基本数据结构与应用

文章目录 概要String结构Hash结构List结构Set结构Zset结构bitmap位图类型geo地理位置类型其他常用命令 概要 redis常用的5种不同数据结构类型之间的映射如下&#xff1a; 结构类型结构存储的值结构的读写能力STRING可以是字符串、整数或者浮点数key-value形式&#xff1b;对整…

JMH304-剑侠情缘2网络版+2017纹饰端+翅膀+单机+外网整理+各种副本

资源介绍&#xff1a; 藏剑-太虚-梁山-杀手堂种树地宫师门纹饰装备长流云阳套等等———– 做登录器联系站长 资源截图&#xff1a; 下载地址

面向切面编程AOP

学Java比搞科研快乐多了 AOP(Aspect rient Programming)&#xff0c;面向切面编程&#xff0c;AOP可以拦截指定的方法并且对方法增强&#xff0c;而且无需侵入到业务代码中&#xff0c;使业务与非业务处理逻辑分离&#xff0c;实现开闭原则。 主要术语&#xff1a; 连接点&…

.NET周刊【5月第4期 2024-05-26】

国内文章 开源低代码框架 ReZero API 正式版本发布 &#xff0c;界面操作直接生成API https://www.cnblogs.com/sunkaixuan/p/18201175 ReZero是一款.NET6的中间件&#xff0c;采用MIT许可证开源&#xff0c;目的是降低.NET Core开发的门槛。它提供界面操作生成API的功能&am…

【杂记-OSPF协议中浅析不同类型报文】

1、发送报文的频率&#xff1a;运行OSPF的路由器在低速网络中每40秒发送一次Hello报文&#xff0c;高速网络中每10秒发送一次Hello报文&#xff0c;由于现在的网络几乎都是以太网&#xff0c;所以每10秒发送一次。 2、部分报文的作用&#xff1a;发现并建立邻居关系、选举DR/BD…