一、gulp

gulp 是基于流的打包构建工具

1. 流

1. 流文件
   • 一种文件传输的格式
   • 一段一段的文件传输
2. 流格式
   • 从头到尾的一个过程
   • 需要从 源 开始一步一步加工，每一个步骤需要依赖上一步的结果，最终给出一个完整的成品

2. gulp 的作用

1. 对于 CSS 文件
   • 压缩
   • 转码（自动添加前缀）
2. 对于 js 文件
   • 压缩
   • 转码（ES6 转 ES5）
3. 对于 html 文件
   • 压缩
   • 转码（对格式的转换）
4. 对于静态资源文件处理
5. 对于第三方文件处理
   …

3. gulp 的安装、检测和卸载

1. 安装
   • 是一个JavaScript 相关 工具
   • 可以直接使用 npm 进行安装
   • 需要安装在你的电脑里，一次安装多次使用
   • windows：npm install --global gulp
   • mac：sudo npm install --global gulp
2. 检测：gulp --version
3. 卸载：npm uninstall --global gulp

https://www.bilibili.com/video/BV1yA411s72G/?vd_source=dea1988d69fb3a1ffe4ad4329ebe71e8

二、webpack

webpack 是基于 js 文件的打包构建工具，它的五个核心概念如下：

1. Entry：指定入口文件，指示 Webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图
2. Loader：让 Webpack 能够处理非 JavaScript 文件（因为 webpack 自身只能理解 JavaScript），例如Less
3. Plugins：插件（Plugins）可以用于执行范围更广的任务，插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
4. Output：输出，知识 webpack 打包后的输出资源输出到哪里去，以及如何命名
5. Mode：模式 Mode 指示Webpack 使用相应模式的配置
   • development：能让代码本地调试运行的环境
   • production：能让代码优化上线运行的环境

1. 打包样式资源

1. 通过 css-loader 把 css 资源 变成 comonjs 模块 加载js 中，里面内容是样式字符串，
2. 通过 style-loader 创建 style 标签，将 js 中的样式资源插入进行，添加到 head 中生效
3. 如果遇到 less 资源，会先把 less 转换为 css 再执行上述顺序

2. 打包 html 资源

const {resolve} = require('path')

moule.exports = {
	entry : './src/index.js',
	output:{
		filename: 'built.js',
		path:resolve(_dirname,'build')
	},
	module:{
		rules:[
			// loader  的配置
		]
	}，
	plugins:[
		// plugins 的配置
		// html-webpack-plugin
		// 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
		// 需求：需要有结构的 HTML文件
		new HtmlWebpackPlugin({
			// 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
			template:'./src/index.html'
		})
	],
	mode:'development'
};

3. 打包图片资源

module:{
	rules:[
		// loader  的配置
		{
			test:/\.less$/,
			// 要使用多个loader处理用use
			use:['style-loader','css-loader','less-loader']
		},
		{
			// 处理图片资源
			test:/\.(jpg|png|gif)$/,
			// 使用一个loader
			// 下载 url-loader，file-loader，npm i  url-loader file-loader-D 
			loader:{
				// 图片大小小于 8kb，就会被 base64 处理
				// 优点：减少请求数量（减轻服务器压力）
				// 缺点：图片体积会更大（文件请求速度更慢）
				limit: 8*1024,
				// 解决：当我们因为 url-loader 默认使用es6 模块解析，而 html-loader引入图片是 commonjs ，解析时就会出现问题： [Object Module]，因此需要关闭 url-loader的es6模块而使用 commonjs解析
				esModule: false,
				// 输出到指定目录下，其他雷同
				outputPath:'images',
				// 给图片进行重命名
				// [hash:10] 取图片的hash的前10位
				// [ext] 取文件原来的扩展名
				name: '[hash:10].[ext]'
			}
		},
		{
			// 处理 html 图片资源
			test:/\.html$/,
			// npm i html-loader -D 
			// 处理 html 文件的img 图片（负责引入 img，从而能被 url-loader进行处理）
			loader: 'html-loader'
		},
	]
}，

4. 压缩 html 代码

• webpack.config.js

const {resolve} = require('path')

moule.exports = {
	entry : './src/index.js',
	output:{
		filename: 'js/built.js',
		path:resolve(_dirname,'build')
	},
	plugins:[
		// plugins 的配置
		// html-webpack-plugin
		// 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
		// 需求：需要有结构的 HTML文件
		new HtmlWebpackPlugin({
			// 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
			template:'./src/index.html',
			// 压缩 html 代码
			minify: {
				// 移除空格
				collapseWhitespace: true,
				// 移除注释
				removeComments: true
			}
		})
	],
	mode:'production'
};

5. 生产环境基本配置

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetWebpackPlugin = require('optimize-css-asset-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 定义 node.js 环境变量，决定使用 browserslist的哪个环境
process.env.NODE_ENV = 'production';
const commonCssLoader = [
	MiniCssExtractPlugin.loader,
	'css-loader',
	{
	// 还需要在 package.json 中定义 browserslist
		loader: 'postcss-loader',
		options:{
			ident:'postcss',
			plugins:()=>[
				require('postcss-preset-env')()
			]
		}
	}
]

module.exports = {
	entry : './src/index.js',
	output:{
		filename: 'js/built.js',
		path:resolve(_dirname,'build')
	},
	module:{
		rules:[
			{
				test: '/\.css$/',
				use: [...commonCssLoader ]
			},
			{
				test: '/\.less$/',
				use: [...commonCssLoader ,'less-loader']
			},
			{
				test: '/\.js$/',
				exclude:/node_modules/,
				loader:'eslint-loader',
				option:{
					fix:true
				}
			},
			{
				test:/\.(jpg|png|gif)/,
				loader:'url-loadder',
				options:{
					limit: 8*1024,
					name: '[hash:10].[ext]',
					outputPath:'images',
					esModule:false
				}
			},
			{
				test:/\.html$/,
				loader:'hml-loadder',
			},
			{
				exclude:/\.(js|css|less|html|jpg|png|gif)/,
				loader: 'file-loader',
				options:{
					outputPath:'media'
				}
			}
		]
	}，
	plugins:[
		// plugins 的配置
		// mini-css-extract-plugin
		new MiniCssExtractPlugin({
			filename:'css/built.css'
		}),
		// 压缩css
		new OptimizeCssAssetWebpackPlugin(),
		
		// html-webpack-plugin
		new HtmlWebpackPlugin({
			// 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
			template:'./src/index.html',
			// 压缩 html 代码
			minify: {
				// 移除空格
				collapseWhitespace: true,
				// 移除注释
				removeComments: true
			}
		})
	],
	mode:'production'
};

三、vite