打包構(gòu)建工具，都是依賴(lài)于 node 環(huán)境進(jìn)行開(kāi)發(fā)，底層封裝的內(nèi)容就是 node 里面的讀寫(xiě)文件

一、gulp

gulp 是基于流的打包構(gòu)建工具

1. 流

1. 流文件
   • 一種文件傳輸?shù)母袷?/li>
   • 一段一段的文件傳輸
2. 流格式
   • 從頭到尾的一個(gè)過(guò)程
   • 需要從 源 開(kāi)始一步一步加工，每一個(gè)步驟需要依賴(lài)上一步的結(jié)果，最終給出一個(gè)完整的成品

2. gulp 的作用

1. 對(duì)于 CSS 文件
   • 壓縮
   • 轉(zhuǎn)碼（自動(dòng)添加前綴）
2. 對(duì)于 js 文件
   • 壓縮
   • 轉(zhuǎn)碼（ES6 轉(zhuǎn) ES5）
3. 對(duì)于 html 文件
   • 壓縮
   • 轉(zhuǎn)碼（對(duì)格式的轉(zhuǎn)換）
4. 對(duì)于靜態(tài)資源文件處理
5. 對(duì)于第三方文件處理
   …

3. gulp 的安裝、檢測(cè)和卸載

1. 安裝
   • 是一個(gè)JavaScript 相關(guān) 工具
   • 可以直接使用 npm 進(jìn)行安裝
   • 需要安裝在你的電腦里，一次安裝多次使用
   • windows：npm install --global gulp
   • mac：sudo npm install --global gulp
2. 檢測(cè)：gulp --version
3. 卸載：npm uninstall --global gulp

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

二、webpack

webpack 是基于 js 文件的打包構(gòu)建工具，它的五個(gè)核心概念如下：

1. Entry：指定入口文件，指示 Webpack 以哪個(gè)文件為入口起點(diǎn)開(kāi)始打包，分析構(gòu)建內(nèi)部依賴(lài)圖
2. Loader：讓 Webpack 能夠處理非 JavaScript 文件（因?yàn)?webpack 自身只能理解 JavaScript），例如Less
3. Plugins：插件（Plugins）可以用于執(zhí)行范圍更廣的任務(wù)，插件的范圍包括，從打包優(yōu)化和壓縮，一直到重新定義環(huán)境中的變量等。
4. Output：輸出，知識(shí) webpack 打包后的輸出資源輸出到哪里去，以及如何命名
5. Mode：模式 Mode 指示W(wǎng)ebpack 使用相應(yīng)模式的配置
   • development：能讓代碼本地調(diào)試運(yùn)行的環(huán)境
   • production：能讓代碼優(yōu)化上線(xiàn)運(yùn)行的環(huán)境

1. 打包樣式資源

1. 通過(guò) css-loader 把 css 資源 變成 comonjs 模塊 加載js 中，里面內(nèi)容是樣式字符串，
2. 通過(guò) style-loader 創(chuàng)建 style 標(biāo)簽，將 js 中的樣式資源插入進(jìn)行，添加到 head 中生效
3. 如果遇到 less 資源，會(huì)先把 less 轉(zhuǎn)換為 css 再執(zhí)行上述順序

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// 功能：默認(rèn)會(huì)創(chuàng)建一個(gè)空的HTML，自動(dòng)引入打包輸出的所有資源（JS/CSS）// 需求：需要有結(jié)構(gòu)的 HTML文件new HtmlWebpackPlugin({// 復(fù)制 './src/index.html' 文件，并自動(dòng)引入打包輸出的所有資源（JS/CSS）template:'./src/index.html'})],mode:'development'
};

3. 打包圖片資源

module:{rules:[// loader  的配置{test:/\.less$/,// 要使用多個(gè)loader處理用useuse:['style-loader','css-loader','less-loader']},{// 處理圖片資源test:/\.(jpg|png|gif)$/,// 使用一個(gè)loader// 下載 url-loader，file-loader，npm i  url-loader file-loader-D loader:{// 圖片大小小于 8kb，就會(huì)被 base64 處理// 優(yōu)點(diǎn)：減少請(qǐng)求數(shù)量（減輕服務(wù)器壓力）// 缺點(diǎn)：圖片體積會(huì)更大（文件請(qǐng)求速度更慢）limit: 8*1024,// 解決：當(dāng)我們因?yàn)?url-loader 默認(rèn)使用es6 模塊解析，而 html-loader引入圖片是 commonjs ，解析時(shí)就會(huì)出現(xiàn)問(wèn)題： [Object Module]，因此需要關(guān)閉 url-loader的es6模塊而使用 commonjs解析esModule: false,// 輸出到指定目錄下，其他雷同outputPath:'images',// 給圖片進(jìn)行重命名// [hash:10] 取圖片的hash的前10位// [ext] 取文件原來(lái)的擴(kuò)展名name: '[hash:10].[ext]'}},{// 處理 html 圖片資源test:/\.html$/,// npm i html-loader -D // 處理 html 文件的img 圖片（負(fù)責(zé)引入 img，從而能被 url-loader進(jìn)行處理）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// 功能：默認(rèn)會(huì)創(chuàng)建一個(gè)空的HTML，自動(dòng)引入打包輸出的所有資源（JS/CSS）// 需求：需要有結(jié)構(gòu)的 HTML文件new HtmlWebpackPlugin({// 復(fù)制 './src/index.html' 文件，并自動(dòng)引入打包輸出的所有資源（JS/CSS）template:'./src/index.html',// 壓縮 html 代碼minify: {// 移除空格collapseWhitespace: true,// 移除注釋removeComments: true}})],mode:'production'
};

5. 生產(chǎn)環(huán)境基本配置

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 環(huán)境變量，決定使用 browserslist的哪個(gè)環(huán)境
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({// 復(fù)制 './src/index.html' 文件，并自動(dòng)引入打包輸出的所有資源（JS/CSS）template:'./src/index.html',// 壓縮 html 代碼minify: {// 移除空格collapseWhitespace: true,// 移除注釋removeComments: true}})],mode:'production'
};

三、vite