前端构建工具(webpackvite)

这里写目录标题

  • 构建工具
    • webpack介绍
      • 配置文件简介
      • entry
      • output
      • loader
      • babel
      • 插件
      • 开发服务器(webpack-dev-server)
      • soureMap
  • vite

构建工具

当我们习惯了在node中编写代码的方式后,在回到前端编写html、css、js这些东西会感觉到各种的不便。比如:不能放心的使用模块化规范(浏览器兼容性问题)、即使可以使用模块化规范也会面临模块过多时的加载问题。我们就迫切的希望有一款工具可以对代码进行打包,将多个模块打包成一个文件。这样一来即解决了兼容性问题,又解决了模块过多的问题。构建工具就起到这样一个作用,通过构建工具可以将使用ESM规范编写的代码转换为旧的JS语法,这样可以使得所有的浏览器都可以支持代码。

webpack介绍

src 是把所有的源码放在了这个src 里面。
我们使用打包工具的前提是这个项目得是一个node项目,所以我们在使用webpack要先把项目初始一下 yarn init -y,会出现一个package.json,初始化就完事了。然后就安装依赖 yarn add -D webpack webpack-cli. -D表示的是开发依赖,区分一下是开发的时候要用的还是运行的时候要用的。然后再项目中创建src 目录,然后编写代码,index.js是默认主目录,是入口文件。然后执行‘’yarn webpack 来对代码进行打包,打包好观察dist目录。dist目录就是打包后的版本。dist目录里有个main.js,就是打包后的代码,index.js是源码。在这里插入图片描述webpack-cli 是命令行工具,没有安装不能用yarn webpack打包。

配置文件简介

webpack.config.js是给node.js看的,所以要遵循node的模块化规范。怎么区分,src 以内的遵循前端规则,src以外的遵循node的开发规范。在这里插入图片描述

entry

在这里插入图片描述
entry 是用来指定打包时的主文件(入口文件 ) 默认是 ./src/index.js。一般不改。在这里插入图片描述

output

在这里插入图片描述
在这里插入图片描述

loader

webpack默认情况下,只会处理js文件,如果我们希望它可以处理其他类型的文件,则要为期引入loader。loader 让 webpack 能够去处理其他类型的文件(默认只能处理js文件),并将它们转换为有效 模块,以供应用程序使用,以及被添加到依赖图中。
使用步骤:
1.安装对应的loader: yarn add css-loader style-loader -D.
2.配置方式:
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
css-loader 只负责打包,style-loader 负责渲染生效【单一职责原则】
loader 执行顺序为从后向前执行,因此use的数组顺序不能调换

babel

在编写js代码时,经常需要使用一些js中的新特性,而新特性在旧的浏览器中兼容性并不好。此时就导致我们无法使用一些新的特性。babel就是这样一个工具,可以将新的js语法转换为旧的js,以提高代码的兼容性。

使用步骤
1.安装 npm install -D babel-loader @babel/core @babel/preset-env
在这里插入图片描述
2.配置

module: {rules: [{test: /\.m?js$/,exclude: /(node_modules|bower_components)/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}}]
}

3.在package.json中设置兼容列表
在这里插入图片描述

插件

在这里插入图片描述
常用插件
html-webpack-plugin
这个插件可以在打包代码后,自动在打包目录生成html页面
使用步骤:
1.安装依赖 yarn add -D html-webpack-plugin
2.引入依赖 const HTMLPlugin = require(“html-webpack-plugin”)
3.配置插件
在这里插入图片描述

开发服务器(webpack-dev-server)

安装:yarn add -D webpack-dev-server
启动:yarn webpack server–open(–open 表示启动服务器后自动打开浏览器)
配置 webpack-watch 执行,(在本地文件夹中访问)代码发生变化时自动更新打包。在这里插入图片描述
可以在package.json中配置
1.先用yarn add-D webpack-dev-server 安装一下
2.就可以启动了,在命令行打yarn webpack server
3.就会把我们的代码布置在一个服务器中
4.直接访问这个地址就行了
在这里插入图片描述
注意:在执行开发服务器之后,一定要在手动的执行yarn webpack,然后才能把打包的东西放在服务器里,不然可能拿到的不是最新的

soureMap

devtool:“inline-source-map” 把我们的源码和编译后的这种代码给我们做成了一个映射
在这里插入图片描述

vite

概念
vite也是前端的构建工具
相较于webpack,vite采用了不同的运行方式:
开发时,不对代码打包,而是采用ESM(ES模块)的方式来运行项目
在项目部署时,再对项目进行打包
vite的速度比webpack要快很多,使用也很方便(都配置好了)
本质上vite和webpack是打包工具,只是webpack比较底层,需要自己手动去配置。
ESM必须通过url加载页面(也就是通过服务器运行,不是本身文件)
基本使用
1.安装开发依赖 yarn add -D vite
2.vite的源码目录默认就是项目的根目录
再页面中引入js文件的时候要指定 type = ‘module’
修改路径直接在script 标签中修改src属性正确即可(webpack需要配置)
3.开发命令:
vite 启动开发服务器
vite bulid 打包代码
vite preview 预览打包后代码
4.使用命令构建项目
在这里插入图片描述
5.使用插件
在这里插入图片描述
需要使用ES6的模块化(export default)去暴露文件(区别webpack使用require)

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

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

相关文章

夏季户外综合征怎么预防

以下是一些预防夏季户外综合征的有效方法: 做好防晒措施: 涂抹高倍数的防晒霜,每隔 2 - 3 小时重新涂抹一次。比如选择 SPF50、PA 的防晒霜。佩戴宽边帽子、太阳镜和遮阳伞,减少阳光直射面部和眼睛。像渔夫帽、大檐帽能有效遮挡阳…

12-阿里云单细胞处理-PBMC(by-jmzeng)

scRNA_10X/seurat-v2/sup-patient1-PBMC.Rmd at master jmzeng1314/scRNA_10X (github.com) s04-运行seurat流程处理一万个单细胞转录组数据并自动化出报告_哔哩哔哩_bilibili #section 3已更新#「生信技能树」单细胞公开课2021_哔哩哔哩_bilibili 上传读取数据 可以配置租…

模拟型题目

题目类型: 给定操作,允许操作任意次 思路收集: 1.暴力遍历:如Problem - B - Codeforces 直接让每一个不同的进行操作 2.归纳:根据模拟来发现规律

RTK_ROS_导航(4):ROS中空地图的生成与加载

1. 地图加载 构建空白 Map 如下,以下为python代码,生成了output_image.pgm 文件 一般你在什么地方运行该代码,这个文件就生成在什么地方 import numpy as np size = 100 # 单位:m resulition = 0.05 # 单位:mw = round(size / resulition) IMAGE_DATA = np.zeros((w

ChatGPT:Swagger 的疑问

ChatGPT:Swagger 的疑问 这段代码是做什么的,为什么每个微服务的写法都一样 springdoc:api-docs:enabled: true # 1. 是否开启 Swagger 接文档的元数据path: /v3/api-docsswagger-ui:enabled: true # 2.1 是否开启 Swagger 文档的官方 UI 界面path: /sw…

音视频解封装demo:使用libmp4v2解封装(demux)出mp4文件中的h264视频数据和aac语音数据

1、README 前言 本demo是使用的mp4v2来将mp4文件解封装得到h264、aac的,目前demo提供的.a静态库文件是在x86_64架构的Ubuntu16.04编译得到的,如果想在其他环境下测试demo,可以自行编译mp4v2并替换相应的库文件(libmp4v2.a&#…

HTTP 范围Range请求

HTTP 的 Range 请求使客户端能够要求服务器仅向其回传 HTTP 消息的一部分 HTTP 的 Range 请求头是 HTTP/1.1 协议的一个特性。它允许客户端请求仅传输资源的某个特定部分,而不是整个资源。 适用场景 支持随机访问的媒体播放器明确只需大型文件某部分的数据处理工具…

2022 RoboCom 世界机器人开发者大赛-高职组(国赛):智能管家

人上了年纪,记性就会变差,时常不得不翻箱倒柜找东西。智能照护中心现在请你做一个简单的智能管家程序,把老人家里的东西逐一编号,放进若干个收纳箱里。当然收纳箱也是有编号的,你的程序要记录下哪个东西放在哪个收纳箱…

R包: phyloseq扩增子统计分析利器

介绍 phyloseq包对多类型数据的综合软件,并其对这些数据提供统计分析和可视化方法。 微生物数据分析的主要挑战之一是如何整合不同类型的数据,从而对其进行生态学、遗传学、系统发育学、多元统计、可视化和检验等分析。同时,由于同行之间需要…

QT学习日记一

创建QT文件步骤 这是创建之后widget.cpp和widget.h文件的具体代码解释,也是主要操作的文件,其中main.cpp不用操作,ui则是图形化操作界面,综合使用时,添加一个元件要注意重编名和编译一下,才能在widget这类…

生产者消费者模型和线程同步问题

文章目录 线程同步概念生产者消费者模型条件变量使用条件变量唤醒条件变量 阻塞队列 线程同步概念 互斥能保证安全,但是仅有安全不够,同步可以更高效的使用资源 生产者消费者模型 下面就基于生产者消费者来深入线程同步等概念: 如何理解生产消费者模型: 以函数调用为例: 两…

[高频 SQL 50 题(基础版)]第一千七百五十七题,可回收且低脂产品

题目: 表:Products ---------------------- | Column Name | Type | ---------------------- | product_id | int | | low_fats | enum | | recyclable | enum | ---------------------- product_id 是该表的主键(具有唯…

SQLite 命令行客户端 + HTA 实现简易UI

SQLite 命令行客户端 HTA 实现简易UI SQLite 客户端.hta目录结构参考资料 仅用于探索可行性&#xff0c;就只实现了 SELECT。 SQLite 客户端.hta <!DOCTYPE html> <html> <head><meta http-equiv"Content-Type" content"text/html; cha…

C语言 | Leetcode C语言题解之第226题翻转二叉树

题目&#xff1a; 题解&#xff1a; struct TreeNode* invertTree(struct TreeNode* root) {if (root NULL) {return NULL;}struct TreeNode* left invertTree(root->left);struct TreeNode* right invertTree(root->right);root->left right;root->right le…

LeetCode加油站(贪心算法/暴力,分析其时间和空间复杂度)

题目描述 一.原本暴力算法 最初的想法是&#xff1a;先比较gas数组和cost数组的大小&#xff0c;找到可以作为起始点的站点(因为如果你起始点的油还不能到达下一个站点&#xff0c;就不能作为起始点)。当找到过后&#xff0c;再去依次顺序跑一圈&#xff0c;如果剩余的油为负数…

从数据仓库到数据湖(下):热门的数据湖开源框架

文章目录 一、前言二、Delta Lake三、Apache Hudi四、Apache Iceberg五、Apache Paimon六、对比七、笔者观点八、总结八、参考资料 一、前言 在上一篇从数据仓库到数据湖(上)&#xff1a;数据湖导论文章中&#xff0c;我们简单讲述了数据湖的起源、使用原因及其本质。本篇文章…

Rust入门实战 编写Minecraft启动器#4下载资源

首发于Enaium的个人博客 首先我们需要添加几个依赖。 model { path "../model" } parse { path "../parse" } reqwest { version "0.12", features ["blocking", "json"] } file-hashing { version "0.1&quo…

Xshell 和宝塔有啥区别

Xshell 和宝塔是两种不同类型的工具&#xff0c;具有以下显著区别&#xff1a; 1. 功能和用途 Xshell&#xff1a;主要是一款用于远程连接服务器的终端模拟软件。它允许用户通过 SSH 协议安全地连接到远程服务器&#xff0c;并在终端中执行命令&#xff0c;进行服务器的管理和…

AI论文作图——如何表示模型参数冻结状态

一、LOGO &#x1f525; win10win11 ❄️ win10win11 二、注意事项&#xff1a; 根据电脑系统&#xff0c;选择对应的版本。 参考&#xff1a; 【AI论文作图】如何表示模型参数冻结状态&#xff1f;

对称加密和非对称加密解析

目录 一、对称加密二、非对称加密三、总结 对称加密和非对称加密是两种主要的加密技术&#xff0c;它们在数据安全领域扮演着重要角色。 一、对称加密 基本原理&#xff1a;对称加密使用同一个密钥进行加密和解密。这意味着如果A用某个密钥加密了信息发送给B&#xff0c;那么B…