Webpack和Vite简单使用

目录

WebPack

介绍

基础使用

初始化使用

 webpack.config.js文件

webpack开发服务器

vite

介绍

使用

使用vite创建vue框架项目

---

WebPack

介绍

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

基础使用

初始化使用

新建一个src文件夹

进入该目录中初始化node项目

npm init -y

 

可以看到src目录中多了package.json文件

安装webpack   -D表示开发环境

 npm add -D webpack webpack-cli

新建一个js文件,进行打包尝试

 

 可以看到目录中新增了一个dist目录,里面就是已经打包好的文件

 再书写一个home.js文件,添加方法并且暴露

 要想使用es6的模块导入需要在package.json文件中添加配置:

 引入并调用

重新打包

再查看dist中文件打包后的变化

发现代码全部被打包压缩为了一行

执行该打包后的文件查看效果

 webpack.config.js文件

 entry : 用来指定打包时的主文件 默认./src/index.js

新建hay.js文件

 重新打包测试:

 

 entry还可以通过传入数组进行指定多个文件进行打包

再新建ha.js文件

 

打包查看dist目录文件

 entry还可以传入对象进行多文件打包

 

 

 output:配置打包后的地址

 

plugin插件

安装插件

npm add -D html-webpack-plugin

 

重新打包

 

重新编译后会自动生成html文件 

webpack开发服务器

在使用webpack中,每次编辑代码后需要手动进行构建,可以直接使用webpack自带的监听命令来进行监听构建

调整index.js文件代码

构建监控 

 npx webpack --watch  

 

 实际开发中可以通过搭建webpack服务器来进行构建监控

安装webpack开发服务器

npm add -D webpack-dev-server

 

启动服务

npx webpack serve --open 

 测试:

 自动编译的有些慢,但是监听的构建都是成功的 

devtool:"inline-source-map" 配置源码的映射

vite

介绍

Vite是一种新型的前端构建工具，它能显著改善前端开发体验。
Vite由两个主要部分组成：
dev server：利用浏览器的ESM能力来提供源文件，具有丰富的内置功能并具有高效的HMR
生产构建：生产环境利用Rollup来构建代码，提供指令用来优化构建过程
Vite作为一个基于浏览器原生ESM的构建工具，它省略了开发环境的打包过程，利用浏览器去解析imports，在服务端按需编译返回。同时，在开发环境拥有速度快到惊人的模块热更新，且热更新的速度不会随着模块增多而变慢。因此，使用Vite进行开发，至少会比Webpack快10倍左右。

使用

初始化node项目

安装vite

  npm add -D vite

 

 新建index.js文件

新建html文件

 输入 npx vite进行构建

 测试:

 可以看到vite的编译明显要比webpack快的多

使用vite构建项目

npx vite build

 

 

 预览构建的项目

npx vite preview

 

 

还可以直接在package.json文件中进行命令配置

 

对应直接输入 npm run dev,npm run build ,npm run preview即可 

使用vite创建vue框架项目

使用npm

npm create vite@latest

使用yarn

yarn create vite

使用pnpm

pnpm create vite

 

 

 选择项目类型

 这里以创建vue来做示例

创建完成

 

启动测试: