篇章十一打包构建工具

文章目录

- 一、gulp
- - [1. 流](#1. 流)
  - [2. gulp 的作用](#2. gulp 的作用)
  - [3. gulp 的安装、检测和卸载](#3. gulp 的安装、检测和卸载)
- 二、webpack
- - [1. 打包样式资源](#1. 打包样式资源)
  - [2. 打包 html 资源](#2. 打包 html 资源)
  - [3. 打包图片资源](#3. 打包图片资源)
  - [4. 压缩 html 代码](#4. 压缩 html 代码)
  - [5. 生产环境基本配置](#5. 生产环境基本配置)
- 三、vite

打包构建工具，都是依赖于 node 环境进行开发，底层封装的内容就是 node 里面的读写文件

一、gulp

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

1. 流

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

2. gulp 的作用

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

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

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

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

二、webpack

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

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

1. 打包样式资源

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

2. 打包 html 资源

c 复制代码

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. 打包图片资源

js 复制代码

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

c 复制代码

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. 生产环境基本配置

js 复制代码

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'
};

篇章十一 打包构建工具

文章目录

一、gulp

1. 流

2. gulp 的作用

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

二、webpack

1. 打包样式资源

2. 打包 html 资源

3. 打包图片资源

4. 压缩 html 代码

5. 生产环境基本配置

三、vite

篇章十一打包构建工具