webpack和vite

一、前言

前端开发中,打包工具是不可或缺的工具之一。它们可以将分散的代码、样式和资源文件打包成更高效的形式,以提高性能、减少加载时间,并优化开发流程。

(一)、打包和打包工具

打包:将多个文件或模块组合成一个或少数几个文件的过程,以减少网络请求和提高性能。

打包工具:用于自动化打包和优化前端项目资源的软件,它们将多个文件合并、压缩,并处理依赖关系,以提供更高性能的输出。

(二)、打包工具的作用

2.1 代码分割

将应用程序拆分为小块,按需加载,减少首次加载时间。

2.2 依赖管理

自动分析和管理模块之间的依赖关系,确保正确加载和执行。

2.3 优化资源

压缩、混淆和图片优化等,减小文件大小,提高性能。

(三)、打包工具的原理

3.1 入口文件

指定一个或多个入口文件,打包工具从这些文件开始分析和构建。

3.2 模块系统

使用模块系统来组织和管理代码,如CommonJS、ES6模块等。

3.3 转换和加载器

通过转换器(Loader)处理不同类型的文件,如JavaScript、CSS、图像等。

3.4 依赖图

根据模块之间的依赖关系构建依赖图,确保正确的加载顺序。

webpack和vite都是前端模块的打包工具

二、webpack

webpack只负责项目打包,其他功能需要在webpack.config.js配置文件里进行设置。

webpack适用于大型,复杂的项目,它可以处理多种不同类型的文件,并根据需求进行转换、压缩、打包。

webpack唯一不好的就是配置比较复杂,需要花费一定的时间和精力进行学习和调试。

(一)、webpack配置八大模块

Entry 必选项
指定读取入口文件(项目开始的文件)

output 必选项
配置代码打包后的地址
打包后的.js就是普通的js文件,.mjs就是es模块的文件

mode webpack4以后必填

devServer 非必填
开发模式配置

modules 非必填 loader编写的地方(用于预处理文件,文件加载器)
使用css-loader可以处理js中的样式
使用style-loader,让css样式生效
编译ts,需要ts-loader
编译vue,需要vue-loader
使用babel-loader,将新的js语法转换为旧的js,以提高代码的兼容性。

plugins 非必填
插件(**用于增强功能,扩展器 **)

optimization 非必填
优化相关

resolve 非必填
提供一些简化功能(别名,文件后缀名省略等等)
https://www.webpackjs.com/configuration/resolve/

单入口--> runtime+vendor+核心业务+异步模块
多入口--> runtime+vendor+每个入口的核心业务代码+common

(二)、webpack.config.js配置文件

const minicss = require("mini-css-extract-plugin")
module.exports = {mode:"production",//none,development(开发模式),production(生产模式)entry:{app:"./app.js"//根据你的项目,自行配置入口文件},output:{path:__dirname+"/dist",//__dirname当前路径下的绝对路径chunkFilename: "[name].js",filename: 'assets/js/[name].[chunkhash:4].bundle.js',//[chunkhash:4]前4位  [name]app名},optimization:{},devServer:{hot: true,  // 打开热更新开关historyApiFallback:true},resolve:{extensions: ['.vue','.js', '.ts', '.css'],alias: {"@": resolve("src"),},},modelu:{rules:[//css样式{test:/\.css$/i,use:[minicss.loader,"style-loader","css-loader"]},//图片生效{test: /\.(png|jpe?g|gif)$/,type: 'asset/resource',generator: {filename: 'assets/img/[hash][ext]'}},{test: /\.vue$/,use: 'vue-loader'},//label把es6转为es5,兼容性{test: /\.less$/i,use: [// compiles Less to CSSminicss.loader,'style-loader','css-loader','less-loader',],},{test:/\.m?js$/,exclude:/(node_modules|bower_components)/,use:{loader:"babel-loader",options:{//告诉babel-leader采用presets:["@babel/preset-env"]规范进行编译。不然就会编译失效//presets对象可以写在当前对象文件中或者可以写进项目根目录的.babelrc文件里,不过需要注意的是,是要以对象的形式写进去presets:["@babel/preset-env",{targets:{//编译目标browsers:[">1%",//支持大于百分之一的浏览器"last 2 version",//支持厂商浏览器最后两个版本"not ie<=8",//不支持小于ie8以下的]}}]}}},//webpack的typeScript加载器{test: /\.(j|t)sx?$/,exclude: /node_modules/,use:['babel-loader',{loader: 'ts-loader',options: {appendTsSuffixTo: [/\.vue$/],// 重要transpileOnly: true,// 重要 取消类型检测 直接进行编译happyPackMode: false,}}]}},//打包输出文件output: {filename: 'assets/js/[name].[contenthash:6].js',path: path.resolve(__dirname, './dist')},//webpack扩展功能plugins: [new VueLoaderPlugin(),//为webpack打包后的js指定模板new HtmlWebpackPlugin({template: path.resolve(__dirname, './public/index.html')})new minicss({filename:"test.bundle.css"}),new minimizer()],optimization: {//代码分割splitChunks: {chunks: "all",//all,async,initialcacheGroups:{vendor:{test:/[\\/]node_modules[\\/]/,filename: "vendor.[chunkhash:4].js",chunks: "all",minChunks: 1},common:{filename: "common.[chunkhash:4].js"chunks: "all",miniChunks:2,//重复出现2次以上,拆分为独立的模块minSize: 0//大于0byte文件才拆分出来}}},runtimeChunk: {//运行时的chunk文件name:"runtime"}},devServer: {hot: true,  // 打开热更新开关historyApiFallback:true},]}
}

2.1 多入口写法与当入口写法

//多入口写法
module.exports = {...entry:{app:"./app.js",app1:"./app1.js"}
}//单入口写法
module.exports = {...entry:"./app.js"
}
  • devtool
devtool:"inline-source-map" //设置代码映射,查看源码,方便调试

2.2 webpack配置项技巧

  • 1.require.context(批量引入指定文件夹下的所有文件)
  • 2.resolve
    2.1 alias-别名,提供路径的简写
    2.2 Extensions-扩展省略,定义可省略的扩展名

(三)、webpack的package.json配置

{"name": "沉默小管",//项目名称"version": "0.0.1",//版本"description": "沉默小管",//项目描述"author": "沉默小管",//作者"license": "MIT","scripts": {//运行脚本"watch": "webpack --watch","dev": "webpack server --open --mode=development","build": "webpack --mode=production"},"husky": {"hooks": {"pre-commit": "lint-staged"}},"lint-staged": {"src/**/*.{js,vue}": ["eslint --fix","git add"]},"keywords": [],//项目关键词"dependencies": {},//项目依赖"devDependencies": { },//开发时依赖"engines": {//启动引擎版本"node": ">=8.9","npm": ">= 3.0.0"},"browserslist": [//设置兼容列表"> 1%","last 2 versions"]
}

三、vite

相较于webpack,vite采用了不同的运行方式。开发时,并不对代码打包,而是直接采用ES模块的方式来运行项目。

在项目部署时,再对项目进行打包。他比webpack少了分析依赖关系的环节。因此,vite的开发速度更快,也适合小型,简单的项目。

(一)、vite.config.js或vite.config.ts文件来配置打包

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';export default defineConfig({// 与插件有关的操作,如自动导入plugins: [visualizer({ open: true }),vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],// 配置目录路径相关操作,如下@的配置resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},// 对全局样式进行相关修改,操作相关操作css: {preprocessorOptions: {scss: {additionalData: '@use "@/assets/styles/variables.scss" as *;'}}},// 开发服务器选项,配置跨区代理api、端口等操作server: {host: "0.0.0.0",port: 3001, // 服务端口号open: true, // 服务启动时是否自动打开浏览器cors: true, // 允许跨域//配置代理proxy: {'/api': {target: '*****',  // 请求地址changeOrigin: true,  // 是否将发送请求host设置为当前的hostrewrite: (path) => path.replace(/^\/api/, 'api'),}}},// 打包构建相关操作build: {// 配置rollup打包项rollupOptions: {output: {// 入口文件// 自己写的js文件entryFileNames: `js/[name]-[hash].js`,// 引入的相关js、ts文件,比如分包之后的jschunkFileNames: `js/[name]-[hash].js`,// 写法1// [ext] 根据不同的后缀名进行分类// assetFileNames: `[ext]/[name]-[hash]`// 写法2// 函数的形式,可对文件进行相关操作assetFileNames: (assetInfo: any) => {if (assetInfo.name.endsWith(".css")) {return `css/[name]-[hash].css`}const imgType = ['.png', 'jpg', '.bmp', '.webp', '.svg', 'gif']if (imgType.some(ext => assetInfo.name.endsWith(ext))) {return `images/[name]-[hash].[ext]`}return `assets/[name]-[hash].[ext]`},// 对打包进行处理,项目中会用到相关的库,而打包变动时,// 这些库不需要变化,要变的只是我们修改的业务相关的js// 所以此操作对不需要变更的库进行统一处理,修改逻辑之后也不会再次进行打包manualChunks: (id) => {if (id.includes("node_modules")) {return `vender`}}},}},
})

四、webpack和vite区别

1、webpack服务器启动速度比vite慢;由于vite启动的时候不需要打包,也就无需分析模块依赖、编译,所以启动速度非常快。

2、vite热更新比webpack快;vite在hrm方面,当某个模块内容改变时,让浏览器去重新请求该模块即可。

3、vite用esbuild预构建依赖,而webpack基于node。

4、vite的生态不及webpack,加载器、插件不够丰富。

四、创建webpack和vite项目

(一)、vite项目

基于vite创建(官方推荐)

创建命令:

npm create vue@latest

具体配置:

1.创建命令
npm create vue@latest

 2.具体配置
配置项目名称
Project name: vue3_test


是否添加TypeScript支持
 Add TypeScript?  Yes


是否添加JSX支持
Add JSX Support?  No


是否添加路由环境
Add Vue Router for Single Page Application development?  No


是否添加pinia环境
Add Pinia for state management?  No


是否添加单元测试
Add Vitest for Unit Testing?  No


是否添加端到端测试方案
Add an End-to-End Testing Solution? » No


 是否添加ESLint语法检查
Add ESLint for code quality?  Yes


是否添加Prettiert代码格式化
Add Prettier for code formatting?  No

vite也可以搭建vue2的项目,如下操作:

vite的版本采用2.8.0的,最新的版本创建后续可能会出现问题

npm init vite@2.8.0  // 指定版本

npm init vite@latest // 正常下载

进入项目之后安装vite对vue2的依赖:

npm install vite-plugin-vue2

// 注意:vite-plugin-vue2的版本为1.9.3
npm install vite-plugin-vue2@1.9.3 -D

要使用 vite 插件,需要在项目的根目录创建 vite.config.js 文件

import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'export default defineConfig({plugins: [createVuePlugin()]
})

安装 vue 依赖

npm install vue@2
npm install vue-template-compiler

通过npm install vue安装会直接安装3.0版本的因此要指定好vue版本

npm install vue@2.x vue-template-compiler@2.x -S    

创建src文件夹,将main.js拉到src目录下

修改 src/main.js

import Vue from "vue";
import App from './App.vue';new Vue({el: '#app',render: h => h(App)
})或import Vue from 'vue'
import App from './App.vue'new Vue({render: h => h(App)
}).$mount('#app')

在src下创建 App.vue 文件

不推荐vite创建vue2项目,容易出问题也没有必要

(二)、webpack

用脚手架vue-cli就可以,详情看以下文章

VUE3学习笔记-CSDN博客

参考文章:

【vue3】webpack和vite介绍与使用【超详细】_vue3 webpack-CSDN博客

vite搭建vue2项目的实战过程_vue.js_脚本之家

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

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

相关文章

正大国际期货:什么是主力合约?

一个期货品种&#xff0c;在同一时间段&#xff0c;会上市多个月份的合约&#xff0c; 由于主力合约交易量大&#xff0c;流动性高&#xff0c;一般建议新手交易主力合约。 主力合约通常指交易集中&#xff0c;流动性好的合约 &#xff0c;即在一段时间内交易量和持仓量最大的…

新零售智能售卖教学实训沙盘内容介绍

新零售智能售卖教学实训沙盘是服务数据分析的教学工具。通过该沙盘&#xff0c;能够让学生了解数据分析在新零售行业智能售卖业务场景的应用流程。使用新零售智能售卖教学实训沙盘进行教学&#xff0c;一方面能够让老师的教学内容更加贴近实际应用&#xff0c;将教学场景具象化…

VisualStudio2022离线包安装后无法进行版本升级(Visual Studio installer 卡在正在下载进度条0%)

目录 一、问题现象二、问题分析三、解决办法恢复正常 一、问题现象 表现1(未安装时&#xff0c;安装) 表现2&#xff08;已安装&#xff0c;升级&#xff09; 二、问题分析 原因&#xff1a;无法访问 aka.ms 测试方法:在浏览器中输入&#xff1a; https://aka.ms/vs/16/rele…

14_Node.js和NPM入门指南

文章目录 NodeJS1.nodejs下载2.NPM的配置和使用3.NPM对一个项目进行初始化操作4.NPM本地仓库进行依赖下载5.查看当前项目有哪些依赖 https://www.npmjs.com/package NodeJS JS代码运行在哪里 1.浏览器2.nodejs 内置谷歌浏览器v8引擎 nodejs具有io磁盘 读写能力。类似java代码和…

【MySQL调优】如何进行MySQL调优?从参数、数据建模、索引、SQL语句等方向,三万字详细解读MySQL的性能优化方案(2024版)

导航&#xff1a; 本文一些内容需要聚簇索引、非聚簇索引、B树、覆盖索引、索引下推等前置概念&#xff0c;虽然本文有简单回顾&#xff0c;但详细可以参考下文的【MySQL高级篇】 【Java笔记踩坑汇总】Java基础进阶JavaWebSSMSpringBoot瑞吉外卖SpringCloud黑马旅游谷粒商城学成…

乙二醇水溶液物性参数

1.1 乙二醇水溶液的冰点、沸点 乙二醇水溶液作为重要的载冷剂&#xff0c;其物理性质对设备和系统的设计都十分重要&#xff0c;下面是乙二醇水溶液的冰点沸点和其浓度的关系。&#xff08;数据来源 ASHRAE 手册 2005&#xff09; 1.2 乙二醇水溶液粘度 乙二醇水溶液作为重要…

【Java毕业设计】基于JavaWeb的旅游论坛管理系统

文章目录 摘 要目 录1 概述1.1 研究背景及意义1.2 国内外研究现状1.3 拟研究内容1.4 系统开发技术1.4.1 Java编程语言1.4.2 vue技术1.4.3 MySQL数据库1.4.4 B/S结构1.4.5 Spring Boot框架 2 系统需求分析2.1 可行性分析2.2 系统流程2.2.1 操作流程2.2.2 登录流程2.2.3 删除信息…

SQLServer 查询指定数据库名和表名及表结构等

查询当前数据库中所有表名&#xff0c;不用指定数据库&#xff0c;选中某数据库直接执行SQL就好 -- U:所有用户表名; S:所有系统表名;V:所有视图表名 SELECT name FROM sysobjects WHERE xtypeU OR xtypeS OR xtypeV 查询指定数据库数据库中所有表名&#xff0c; SELECT TAB…

使用 Ollama 本地运行各种 LLM

今天看看另外一个产品Ollama。Ollama 的安装非常简单&#xff0c;只需从官网&#xff08;https://ollama.com/download&#xff09;下载后解压缩&#xff0c;并在 Terminal 中运行脚本 ollama run llama3 即可完成环境设置。 我尝试运行 Llama3&#xff0c;虽然在运行时占用了大…

20240606在Toybrick的TB-RK3588开发板的Android12下确认HDMI的驱动

20240606在Toybrick的TB-RK3588开发板的Android12下确认HDMI的驱动 2024/6/6 9:48 【原文是在RK3328的Android7.1下写的。我将它升级成为RK3588的Android12了】 RK平台主要采用 FB 和 DRM 两种显示框架。与此相对应&#xff0c; HDMI 也有两套驱动。 FB&#xff1a; LINUX 3.10…

C语言 | Leetcode C语言题解之第136题只出现一次的数字

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<int> singleNumbers(vector<int>& nums) {int eor 0;for (int num:nums)eor ^ num;int rightOne eor & (~eor 1); // 提取出最右的1int onlyOne 0;for (int cur : nums) {if ((cur…

弘君资本今日投资参考:新能源消纳政策加码 智能网联汽车再加速

昨日&#xff0c;沪指午后在金融、酿酒等板块的带动下发力拉升&#xff0c;深证成指、创业板指走势微弱。截至收盘&#xff0c;沪指涨0.41%报3091.2点&#xff0c;深证成指涨1.05%报9469.32点&#xff0c;创业板指涨1.33%报1843.59点&#xff0c;上证50指数涨0.58%&#xff0c;…

LCEDA使用:QA(不定期更新)

1. 优势&#xff1a; 器件库选择&#xff1a;可以在立创商城中选择器件库&#xff0c;操作便捷。面板切换&#xff1a;S快捷键在 画图/器件选择 面板中切换&#xff0c;不打断工作节奏。连续放置Net Label&#xff1a;连续放置net label的体验流畅。复制粘贴功能&#xff1a;复…

论文阅读 Explainable Image Similarity Integrating Siamese Networks and Grad-CAM

给出论文&#xff08;Explainable Image Similarity Integrating Siamese Networks and Grad-CAM&#xff09;的内容解读、代码运行说明 论文链接&#xff1a;J. Imaging | Free Full-Text | Explainable Image Similarity: Integrating Siamese Networks and Grad-CAM (mdpi.c…

基于ensp的园区网络搭建综合实验

核心技术介绍 1、虚拟局域网&#xff08;VLAN&#xff09; 2、链路聚合&#xff08;E-trunk&#xff09; 3、多生成树协议&#xff08;MSTP&#xff09; 4、VLANIF三层逻辑接口 5、虚拟路由冗余协议&#xff08;VRRP&#xff09; 6、开放式最短路径优先&#xff08;OSPF&…

灵动岛动效:打造沉浸式用户体验

灵动岛是专属于 iPhone 14 Pro 系列交互UI&#xff0c;通过通知消息的展示和状态的查看与硬件相结合&#xff0c;让 iPhone 14 Pro 系列的前置摄像头和传感器的“感叹号”&#xff0c;发生不同形状的变化。这样做的好处是让虚拟软件和硬件的交互变得更为流畅&#xff0c;以便让…

手机建站介绍

随着科技的不断进步和移动互联网的普及&#xff0c;手机应用已经成为人们生活中最不可或缺的一部分。而手机建站作为一种新兴技术&#xff0c;在这一领域也有着广泛的应用。本文将为大家介绍手机建站的概念、优势和应用。 什么是手机建站&#xff1f; 手机建站是指将传统的网络…

信息系统项目管理师0144:裁剪考虑因素(9项目范围管理—9.2项目范围管理过程—9.2.2裁剪考虑因素)

点击查看专栏目录 文章目录 9.2.2 裁剪考虑因素 9.2.2 裁剪考虑因素 因为每个项目都是独特的&#xff0c;所以项目经理可能根据需要裁剪项目范围管理过程。裁剪时应考虑的因素包括&#xff1a; 知识和需求管理&#xff1a;项目经理应建立哪些指南&#xff1f;为了在未来项目中…

利用opencv-python实现图像全景拼接技术实现

这个代码的主要功能是将多张图像拼接成一张全景图。它使用了OpenCV库中的SIFT特征提取、特征匹配和图像变换等技术来实现图像拼接。 一、预览效果 二、安装依赖 contourpy1.2.1 cycler0.12.1 fonttools4.53.0 importlib_resources6.4.0 kiwisolver1.4.5 matplotlib3.9.0 numpy…

【数据结构】——线性表(顺序表)——内有代码详解

目录 一、引言 二、线性表 2.1 定义 2.2 特点 三、顺序表 3.1 顺序表的概念 3.2 顺序表的特点 3.3 顺序表的定义 3.3.1 静态定义 3.3.2 动态定义 3.4 顺序表的初始化 3.4.1 静态初始化 3.4.2 动态初始化 3.5 顺序表的销毁 3.6 顺序表元素的打印 3.7 顺序表的插入…