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,一经查实,立即删除!

相关文章

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元数据 面板及其用…

R实验 参数估计

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

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

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

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

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

链表mark

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

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

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

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

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

NDIS小端口驱动开发(一)

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

redis基本数据结构与应用

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

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

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

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

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

《Ai学习笔记》自然语言处理 (Natural Language Processing):常见机器阅读理解模型(上)02

Glove 词向量: 在机器理解中的词的表示: 词袋(bow,bag of words) one-hot 词向量 word2vec glove 目的:将一个词转换成一个向量 Word2vec 是一种用于生成词向量的工具包,由Google在2013年开源推出…

大规模语言模型的书籍分享

在当今人工智能领域,大规模语言模型成为了研究和应用的热点之一。它们以其大规模的参数和强大的性能表现,推动着机器学习和深度学习技术的发展。对于GPT 系列大规模语言模型的发展历程,有两点令人印象深刻。 第一点是可拓展的训练架构与学习范…

《TCP/IP网络编程》(第十二章)I/O复用(1)

本章将讨论实现并发服务器的第二种办法,基于I/O复用的服务器端构建。 I/O复用它允许单个进程或线程同时处理多个输入/输出(I/O)操作,而无需为每个I/O操作创建一个独立的线程或进程。这种技术可以显著提高应用程序的效率和性能&…

前端学习--React部分

文章目录 前端学习--React部分前言1.React简介1.1React的特点1.2引入文件1.3JSX🍉JSX简介与使用🍉JSX语法规则 1.4模块与组件🍉模块🍉组件 1.5安装开发者工具 2.React面向组件编程2.1创建组件🍉函数式组件&#x1f349…

Elasticsearch 认证模拟题 - 1

1、题目 定义一个数据流,满足 data-stream_*_*,数据首先分布在 data_hot,5分钟后移动到 data_warm,3分钟后到 data_cold,再过 8 分钟删除。 1.1 考点 生命周期索引模板数据流 1.2 答案 # 修改生命周期策略修改时间…

【算法】位运算算法——只出现一次的数字Ⅱ

题解:只出现一次的数字Ⅱ(位运算算法) 目录 1.题目2.题解:3.代码示例4.总结 1.题目 题目链接:LINK 要求:时间复杂度:O(N),空间复杂度:O(1) 2.题解: 3.代码示例 class Solution {…

Java设计模式 _行为型模式_中介者模式

一、中介者模式 1、中介者模式 中介者模式(Mediator Pattern)是一种行为型模式。主要通过一个中介类,该类通常处理不同类之间的通信,并支持松耦合,使代码易于维护。 2、实现思路 (1)、定义实体…

【Linux】-Kafka集群安装部署[18]

简介 Apache Kafka是一款分布式的、去中心化的、高吞吐低延迟、订阅模式的消息队列系统。 同RabbitMQ一样,Kafka也是消息队列。不过RabbitMQ多用于后端系统,因其更加专注于消息的延迟和容错。 Kafka多用于大数据体系,因其更加专注于数据的…