wordpress 評(píng)論倒敘seo搜索引擎優(yōu)化薪資
文章目錄
- 一、gulp
- 1. 流
- 2. gulp 的作用
- 3. gulp 的安裝、檢測(cè)和卸載
- 二、webpack
- 1. 打包樣式資源
- 2. 打包 html 資源
- 3. 打包圖片資源
- 4. 壓縮 html 代碼
- 5. 生產(chǎn)環(huán)境基本配置
- 三、vite
打包構(gòu)建工具,都是依賴(lài)于 node 環(huán)境進(jìn)行開(kāi)發(fā),底層封裝的內(nèi)容就是 node 里面的讀寫(xiě)文件
一、gulp
gulp 是基于流的打包構(gòu)建工具
1. 流
- 流文件
- 一種文件傳輸?shù)母袷?/li>
- 一段一段的文件傳輸
- 流格式
- 從頭到尾的一個(gè)過(guò)程
- 需要從 源 開(kāi)始一步一步加工,每一個(gè)步驟需要依賴(lài)上一步的結(jié)果,最終給出一個(gè)完整的成品
2. gulp 的作用
- 對(duì)于 CSS 文件
- 壓縮
- 轉(zhuǎn)碼(自動(dòng)添加前綴)
- 對(duì)于 js 文件
- 壓縮
- 轉(zhuǎn)碼(ES6 轉(zhuǎn) ES5)
- 對(duì)于 html 文件
- 壓縮
- 轉(zhuǎn)碼(對(duì)格式的轉(zhuǎn)換)
- 對(duì)于靜態(tài)資源文件處理
- 對(duì)于第三方文件處理
…
3. gulp 的安裝、檢測(cè)和卸載
- 安裝
- 是一個(gè)JavaScript 相關(guān) 工具
- 可以直接使用 npm 進(jìn)行安裝
- 需要安裝在你的電腦里,一次安裝多次使用
- windows:
npm install --global gulp
- mac:
sudo npm install --global gulp
- 檢測(cè):
gulp --version
- 卸載:
npm uninstall --global gulp
https://www.bilibili.com/video/BV1yA411s72G/?vd_source=dea1988d69fb3a1ffe4ad4329ebe71e8
二、webpack
webpack 是基于 js 文件的打包構(gòu)建工具,它的五個(gè)核心概念如下:
- Entry:指定入口文件,指示 Webpack 以哪個(gè)文件為入口起點(diǎn)開(kāi)始打包,分析構(gòu)建內(nèi)部依賴(lài)圖
- Loader:讓 Webpack 能夠處理非 JavaScript 文件(因?yàn)?webpack 自身只能理解 JavaScript),例如Less
- Plugins:插件(Plugins)可以用于執(zhí)行范圍更廣的任務(wù),插件的范圍包括,從打包優(yōu)化和壓縮,一直到重新定義環(huán)境中的變量等。
- Output:輸出,知識(shí) webpack 打包后的輸出資源輸出到哪里去,以及如何命名
- 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. 打包樣式資源
- 通過(guò) css-loader 把 css 資源 變成 comonjs 模塊 加載js 中,里面內(nèi)容是樣式字符串,
- 通過(guò) style-loader 創(chuàng)建 style 標(biāo)簽,將 js 中的樣式資源插入進(jìn)行,添加到 head 中生效
- 如果遇到 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'
};