篇章十一 打包构建工具

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

一、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处理用useuse:['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 中定义 browserslistloader: '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-pluginnew MiniCssExtractPlugin({filename:'css/built.css'}),// 压缩cssnew OptimizeCssAssetWebpackPlugin(),// html-webpack-pluginnew HtmlWebpackPlugin({// 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）template:'./src/index.html',// 压缩 html 代码minify: {// 移除空格collapseWhitespace: true,// 移除注释removeComments: true}})],mode:'production'
};

三、vite