网站首页 > 技术文章正文

Webpack前端打包工具、Vite前端打包工具，介绍、原理及优缺点

ins518 2024-09-24 18:02:01 技术文章 13 ℃ 0 评论

Webpack和Vite介绍

Webpack，前端打包工具，使用NodeJS编写，JS应用程序的静态模块打包器，以一个或多个JS文件为入口，递归检查每个JS模块的依赖，从而构建出一个依赖关系图，然后依据该关系图，将整个应用程序打包成一个或多个bundle。

Vite，前端打包工具，VUE的作者尤雨溪在开发vue3.0时开发的一个基于原生 ES-Module的前端构建工具。

Webpack和Vite原理

Webpack：分析依赖 => 编译打包 => 交给本地服务器进行渲染；

Vite: 启动服务器=> 请求模块时按需动态编译显示；

Webpack和Vite优缺点

1、Vite快速的冷启动，不需要等待打包；即时的热模块更新；真正的按需编译，不用等待整个项目编译完成。

2、Vite相关生态没有Webpack完善（当前），Vite可以作为开发的辅助。

Webpack和Vite构建项目及基本配置

构建项目（Webpack）

全局安装Webpack命令：npm install -g webpack webpack-cli

全局安装vue-cli命令：npm install -g @vue/cli

创建项目命令：vue create demo01

选择：vue3==>cd demo01==>npm install==>npm run serve

vue.config.js内容：

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

transpileDependencies: true

})

构建项目（Vite）

创建项目命令：npm create vite@latest demo02

选择：vue==>JavaScript==>cd demo02==>npm install==>npm run dev

vue.config.js内容：

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

export default defineConfig({

plugins: [vue()],

})