初认识构建工具

初认识构建工具Webpack & Vite

目录

  • 前言
  • webpack
    • 使用步骤
    • 配置文件
      • _entry
      • _output
      • ✨_loader
      • _babel
      • _plugin
      • _source map
    • 开发服务器

前言

不同于node中编写代码,在html、css、js中不能放心使用模块化规范,主要是浏览器兼容性问题,以及使用模块化规范会面临过多的加载问题,如果是在服务端使用模块,没什么问题,但是这是在浏览器中使用,一个模块相当于一个文件,浏览器发送请求占用一定的时间。

所以希望可以用一款工具对代码进行打包,将多个模块打包一个文件,既解决了兼容性问题,又只需要发送一个请求。

构建工具就是可以将ESM规范编写的代码转换为旧的JS语法,这样所有浏览器都可以支持这些代码。

在这里插入图片描述

webpack

使用步骤

  1. 初始化 npm/yarn init -y 或者 pnpm init
  2. 安装依赖 webpack(核心工具)、webpack-cli(webpack命令行工具)
  3. 在项目中创建src文件夹,编写代码(index.js)
  4. 执行 yarn webpack 对代码进行打包(打包后观察dist)

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

webpack打包的时候默认会到src目录下找到index.js,打包后浏览器要执行的代码其实是main.js。

webpack打包代码的时候是按需打包的:如果我在index.js里面导入了m2模块,但是没有使用m2对外暴露的属性或者方法,那webpack就不会把这部分打包;如果是导入了m2,没有使用m2暴露的,但是m2里面有不对外暴露的属性或者方法,webpack不能确定是否会执行,所以会统统进行打包。

简而言之就是不执行的代码,webpack不会进行打包,不能确定不执行的代码,webpack统统打包。

在这里插入图片描述

配置文件

在项目根目录新建webpack.config.js,这个文件是在node运行的,所以要遵循Commonjs规范。

_entry

指定打包时的入口文件,默认 src/index.js

在这里插入图片描述

结果与默认打包后的一样。

在这里插入图片描述

还可以传数组,数组里面的文件都会被打包成一个文件:

在这里插入图片描述

在这里插入图片描述

还可以传对象

在这里插入图片描述

_output

配置打包后的地址。

在这里插入图片描述

这里用到的clean参数,清理的目录是path指定的目录,所以原来的dist里面的打包文件没有被清除。

如果entry配置了多个文件,outputfilename就可以写成:

在这里插入图片描述

如果要记录打包生成的不同版本,可以配置filename: '[name]-[id]-[hash].js'

✨_loader

webpack打包默认只能处理js/json文件,所以需要配置loader去处理其他文件。

概念 | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)

有其他文件会报错:

在这里插入图片描述

使用步骤(以css为例):

  1. 安装对应的loader:yarn add css-loader -D

  2. 配置:这里配置项是module

    在这里插入图片描述

    到这里就可以成功打包了,但是样式还是不会生效,还需要再装一个style-loader样式才会生效。

    一个loader只负责一件事。

    use配置项的执行顺序是从数组后面往前面执行,所以这里顺序不能改!

    loader 支持链式调用。链中的每个 loader 会将转换应用在已处理过的资源上。一组链式的 loader 将按照相反的顺序执行。链中的第一个 loader 将其结果(也就是应用过转换后的资源)传递给下一个 loader,依此类推。最后,链中的最后一个 loader,返回 webpack 所期望的 JavaScript。

    在这里插入图片描述

    如果是图片资源类型的数据,可以通过指定type进行处理,webpack内置了。

    在这里插入图片描述

_babel

在编写js代码,经常需要使用一些js中的新特性,而新特性在旧的浏览器中兼容性并不好,例如箭头函数。如果想要用新特性继续编写代码,可以用babel这个工具去将新语法转换为旧的语法,达成提高代码兼容性的效果。

在这里插入图片描述

在这里插入图片描述
使用步骤:

  1. 先引入babel的loader(相当于babel和webpack的中间件了):npm install -D babel-loader @babel/core @babel/preset-env webpack

  2. 配置:

    在这里插入图片描述

用了babel以后,再打包:

在这里插入图片描述

在packjson里面可以配置要兼容哪些浏览器:

需要指定某个浏览器的时候可以查看这个链接

在这里插入图片描述

_plugin

为webpack拓展功能。

html-webpack-plugin:这个插件可以在打包代码后,自动在打包目录生成html页面。

使用步骤:

  1. 安装依赖 yarn add -D html-webpack-plugin

  2. 配置插件

    在这里插入图片描述

还有其他插件可以使用…

插件和加载器的区分方法:加载器会将代码编译成另一种代码,插件不会。

_source map

正常来说浏览器上是没办法对源码进行调试的,有了下面配置项之后就可以在浏览器进行源码的断点调试,它就是配置了源码的映射。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

开发服务器

安装依赖:yarn add -D webpack-dev-server

配置自定义指令:

在这里插入图片描述

然后命令行直接使用yarn dev即可。

这种情况下是看不到dist目录的,因为它是打包到了服务器上,然后在服务器上运行。

Vite(待更新)

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

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

相关文章

数据结构 ——— 向上调整建堆和向下调整建堆的区别

目录 前言 向下调整算法(默认小堆) 利用向下调整算法对数组建堆 向上调整建堆和向下调整建堆的区别​编辑 向下调整建堆的时间复杂度: 向上调整建堆的时间复杂度: 结论 前言 在上一章讲解到了利用向上调整算法对数组进行…

分享几款开源好用的图片在线编辑,适合做快速应用嵌入

图片生成器是指一种工具或软件,用于自动生成图片或图像内容,通常依据用户设定的参数或模板进行操作。这种工具能够帮助用户快速创建视觉效果丰富的图像,而无需具备专业的设计技能。 在数字化时代,图片编辑已经成为日常工作和生活的…

我为何要用wordpress搭建一个自己的独立博客

我在csdn有一个博客,这个博客是之前学习编程时建立的。 博客有哪些好处呢? 1,可以写自己的遇到的问题和如何解决的步骤 2,心得体会,经验,和踩坑 3,可以转载别人的好的技术知识 4,宝贵…

ts:使用fs内置模块简单读写文件

ts:使用fs内置模块简单读写文件 一、主要内容说明二、例子(一)、fs模块的文件读写1.源码1 (fs模块的文件读写)2.源码1运行效果 三、结语四、定位日期 一、主要内容说明 在ts中,我们可以使用内置的fs模块来…

十个常见的软件测试面试题,拿走不谢

所有面试问题一般建议先总后分的方式来回答,这样可以让面试官感觉逻辑性很强。 1. 自我介绍 之所以让我们自我介绍,其实是面试官想找一些时间来看简历,所以自我介绍不用太长的时间,1-2分 钟即可。 自我介绍一般按以下方式进行介…

C++中关于 <functional> 的使用

#include <functional> 是 C 标准库中的一个头文件&#xff0c;主要用于提供与函数对象、函数指针和函数适配器相关的功能 一&#xff1a;定义方式 1. 定义和使用 std::function 和 Lambda 表达式 2&#xff1a;使用 std::bind 你可以使用 std::bind 来绑定函数参数&am…

Axios 请求超时设置无效的问题及解决方案

文章目录 Axios 请求超时设置无效的问题及解决方案1. 引言2. 理解 Axios 的超时机制2.1 Axios 超时的工作原理2.2 超时错误的处理 3. Axios 请求超时设置无效的常见原因3.1 配置错误或遗漏3.2 超时发生在建立连接之前3.3 使用了不支持的传输协议3.4 代理服务器或中间件干扰3.5 …

WPF+MVVM案例实战(十五)- 实现一个下拉式菜单(上)

文章目录 1 案例效果2、图标资源下载3、功能实现1.文件创建2、菜单原理分析3、一级菜单两种样式实现1、一级菜单无子项样式实现2、一级菜单有子项样式实现 4、总结 1 案例效果 提示 2、图标资源下载 从阿里矢量素材官网下载需要的菜单图片&#xff0c;如下所示&#xff1a; …

【环境搭建】Apache ZooKeeper 3.8.4 Stable

软件环境 Ubuntu 20.04 、OpenJDK 11 OpenJDK 11&#xff08;如果已经安装&#xff0c;可以跳过这一步&#xff09; 安装OpenJDK 11&#xff1a; $ sudo apt-get update$ sudo apt-get install -y openjdk-11-jdk 设置 JAVA_HOME 环境变量&#xff1a; $ sudo gedit ~/.bash…

后台管理系统的通用权限解决方案(九)SpringBoot整合jjwt实现登录认证鉴权

1&#xff09;创建maven工程jjwt-login-demo&#xff0c;并配置其pom.xml文件如下 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-ins…

国考报名照片无法使用照片审核工具上传失败的解决办法

国考报名过程中&#xff0c;照片审核是至关重要的一步&#xff0c;但许多考生在上传照片时遇到了难题&#xff0c;导致无法继续报名&#xff0c;从而影响抢考场位置&#xff0c;下面就介绍如何快速完成照片处理、审核和上传过审的技巧。 一、国考报名照片基本要求首先&#xff…

vue中如何为不同功能设置不同的默认打印设置(设置不同的打印机)

浏览器自带的window.print 功能较简单&#xff0c;这里使用LODOP露肚皮打印 以下是vue2示例&#xff1a; 从官网中下载Lodop和C-Lodop官网主站安装包并安装到本地电脑可以全局搜索电脑找到安装文件LodopFuncs.js&#xff0c;也可以直接复制我贴出来的文件 //用双端口加载主JS…

数据库管理系统的ACID都各自是什么?

本文基于DBMS中ACID属性的概念&#xff0c;这些属性保证了数据库中执行事务时保持数据一致性、完整性和可靠性所。事务是访问并可能修改数据库内容的单一逻辑工作单元。交易使用读写操作访问数据。为了保持数据库的一致性&#xff0c;在事务前后&#xff0c;遵循某些属性。这些…

ssm基于vue搭建的新闻网站+vue

系统包含&#xff1a;源码论文 所用技术&#xff1a;SpringBootVueSSMMybatisMysql 免费提供给大家参考或者学习&#xff0c;获取源码请私聊我 需要定制请私聊 目 录 目 录 I 摘 要 III ABSTRACT IV 1 绪论 1 1.1 课题背景 1 1.2 研究现状 1 1.3 研究内容 2 [2 系统…

OB_GINS_day3

这里写目录标题 实现当前状态初始化实现预积分的初始化由于此时preintegration_options 是3&#xff08;也就是考虑odo以及earth rotation&#xff09;为预积分的容器添加需要积分的IMU积分因子接下来是添加新的IMU到preintegration中 实现当前状态初始化 这个state_curr的主要…

如何优化kafka和mysql处理百万级消息计算和落库

一.业务场景 最近业务需要&#xff0c;做了性能优化操作。百万级消息在kafka中秒级传输。cpu密集计算分钟级完成&#xff0c;然后在mysql中秒级落库.模型cpu计算提高了1倍&#xff0c;落表速度提高了5倍&#xff0c;2分钟内完成. 如下序列图&#xff1a; 业务系统A发送千级别…

深度学习基础知识-Batch Normalization(BN)超详细解析

一、背景和问题定义 在深层神经网络&#xff08;Deep Neural Networks, DNNs&#xff09;中&#xff0c;层与层之间的输入分布会随着参数更新不断发生变化&#xff0c;这种现象被称为内部协变量偏移&#xff08;Internal Covariate Shift&#xff09;。具体来说&#xff0c;由…

NLP算法工程师精进之路:顶会论文研读精华

1.学术能力培养 全部论文资料下载&#xff1a; 将论文和 GitHub 资源库匹配 papers with code https://paperswithcode.com/OpenGitHub 新项目快报Github pwc&#xff1a;https://github.com/zziz/pwc GitXiv&#xff1a;http://www.gitxiv.com/ 文章撰写 Overleaf [Autho…

从倍压整流到二极管钳位与限幅

何为倍压整流&#xff1f;这里直接引用“百度百科”解释&#xff0c;如下述。 在一些需用高电压、小电流的地方&#xff0c;常常使用倍压整流电路。倍压整流&#xff0c;可以把较低的交流电压&#xff0c;用耐压较高的整流二极管和电容器&#xff0c;“整”出一个较高的直流电…

Java项目实战II基于Java+Spring Boot+MySQL的工程教育认证的计算机课程管理平台(源码+数据库+文档)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 随着工程教…