构建工具

将多个模块打包成一个文件，这样一来即解决了兼容问题，又解决了模块过多的问题。
构建工具可以使用ESC规范编写的代码转换，这样就可以使得所有得浏览器都支持该代码

webpack

使用步骤： 1.初始化项目 yarn init -y 2.安装依赖 webpack 、webpack-cil 3.在项目中创建 src目录，然后编写代码 4. 执行npm webpack来对代码进行打包（打包后观察dist目录）

配置文件

entry(入口)

在webpack.config.js中如果需要更改运行文件，则需要在module.exports中添加entry ，用来指定打包的主文件，默认是 ==./src/index.js==。

使用数组【】时，两个及以上文件打包在一起，并且是在同一个包中。
使用对象{}时，两个文件打包时，分别打包两个包中

output（出口）

filename：xxx 打包后的文件名 clean：true 自动清理dist文件 path: "xxx" 打包后的路径，但是必须要是绝对路径

webpack默认情况下，只会处理js文件，如果我们希望它可以处理其他类型的文件，则要为其引入__loader__

loader

以css为例
	-使用css-loader可以处理js中的样式
	-使用步骤：
		1.安装： npm i css-loader -D
		
		2.配置：
		module:{
				rules:[
				{
				test:/\.css$/i,
				use:["style-loader","css-loader"]
				},
				(图片){
				test：/\.(jpg|png|gif) $/i,
				type:"asset/resoure" 
				}
				]
			}

在编写js代码时，经常需要使用一些js中的新特性，而新特性在旧的浏览器中兼容性不高，就导致我们无法使用新的特性。
但是我们希望能够使用新的特性，我们可以采用一些工具将新代码转换为旧代码。
Babel就是这样一个工具，可以将新的js语法转换为旧的js，以提高代码兼容性。
如果我们希望在webpack支持babel，则需要向webpack中引入babel中的loader
使用步骤： 1.安装： npm install -D babel-loader @babel/core @babel/preset-env webpack 2. webpack 配置对象:

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

3.在package.json中设置兼容列表

"browserslist":[
				"defaults"
				]

插件（plugin）

插件用来为webpack来扩展功能
html-webpack-plugin -这个插件可以在打包代码后，自动在打包目录生成html页面下载watch： npm i webpack watch 监视代码及时更新

开发服务器：安装：npm i -D webpack-dev-server 开启服务器：npm webpack server

vite

vite也是前端的工具
相较于webpack，vite采用不同的运行方式： -开发时，并不对代码打包，而是直接采用ESC的方式运行项目 -在项目部署时，对项目进行打包

基本使用：

1.安装开发依赖 vite 2.vite的源码目录就是项目根目录 3.开发命令： -vite 启动开发服务器 -vite build 打包代码 -vite preview 预览打包后代码

-使用命令构建

NPM:

npm create vite@latest

Yarn:

yarn create vite

PNPM:

pnpm create vite

插件： 兼容性插件，支持低版本

$ npm add -D @vitejs/plugin-legacy

配置文件：vite config.js

// vite.config.js
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
})

前端构建工具