柚子快報(bào)邀請(qǐng)碼778899分享：Webpack看這篇就夠了

http://yzkb.51969.com/

???????歡迎來到我的博客，很高興能夠在這里和您見面！希望您在這里可以感受到一份輕松愉快的氛圍，不僅可以獲得有趣的內(nèi)容和知識(shí)，也可以暢所欲言、分享您的想法和見解。

非常期待和您一起在這個(gè)小小的網(wǎng)絡(luò)世界里共同探索、學(xué)習(xí)和成長(zhǎng)。??? ?? 歡迎訂閱本專欄 ?? ?

前言

本文將詳細(xì)地講解webpack的基礎(chǔ)入門知識(shí)，如果對(duì)大家有幫助，請(qǐng)一鍵三連哦!

目錄

1.Webpack

2.Webpack 修改入口和出口

3. Webpack 自動(dòng)生成 html 文件

4.Webpack-打包 css 代碼

5. 優(yōu)化-提取 css 代碼

6. 優(yōu)化壓縮過程

7. Webpack-打包 less 代碼

8. Webpack-打包 less 代碼

9. Webpack-打包圖片

10.Webpack 搭建開發(fā)環(huán)境

11. Webpack 打包模式

12.Webpack 打包模式的應(yīng)用

13.Webpack 前端注入環(huán)境變量

14.Webpack 開發(fā)環(huán)境調(diào)錯(cuò) source map

15.Webpack 設(shè)置解析別名路徑

16.Webpack 多頁面打包

1.Webpack

1.Webpack 是一個(gè)靜態(tài)模塊打包工具，從入口構(gòu)建依賴圖，打包有關(guān)的模塊，最后用于展示你的內(nèi)容

2.靜態(tài)模塊：編寫代碼過程中的，html，css， js，圖片等固定內(nèi)容的文件

3.打包過程，注意：只有和入口有直接/間接引入關(guān)系的模塊，才會(huì)被打包

4.Webpack 的作用：把靜態(tài)模塊內(nèi)容，壓縮，這個(gè)和，轉(zhuǎn)譯等（前端工程化）

步驟：

1.新建項(xiàng)目文件夾 Webpack_study，初始化包環(huán)境，得到 package.json 文件

npm init -y

2.新建 src 源代碼文件夾（書寫代碼）包括 utils/check.js 封裝用戶名和密碼長(zhǎng)度函數(shù)，引入到 src/index.js 進(jìn)行使用

src/utils/check.js

// 封裝校驗(yàn)手機(jī)號(hào)長(zhǎng)度和校驗(yàn)驗(yàn)證碼長(zhǎng)度的函數(shù)

export const checkPhone = phone => phone.length === 11

export const checkCode = code => code.length === 6

src/index.js

/**

* 目標(biāo)1：體驗(yàn) webpack 打包過程

*/

// 1.1 準(zhǔn)備項(xiàng)目和源代碼

import { checkPhone, checkCode } from '../utils/check.js'

console.log(checkPhone('13900002020'))

console.log(checkCode('123123123123'))

// 1.2 準(zhǔn)備 webpack 打包的環(huán)境

// 1.3 運(yùn)行自定義命令打包觀察效果（npm run 自定義命令）

3.下載 webpack webpack-cli 到項(xiàng)目（版本獨(dú)立）

npm i webpack webpack-cli --save-dev

注意：雖然 webpack 是全局軟件包，封裝的是命令工具，但是為了保證項(xiàng)目之間版本分別獨(dú)立，所以這次比較特殊，下載到某個(gè)項(xiàng)目環(huán)境下，但是需要把 webpack 命令配置到 package.json 的 scripts 自定義命令，作為局部命令使用

4.項(xiàng)目中運(yùn)行工具命令，采用自定義命令的方式（局部命令）

npm run build

npm run 自定義命令名字

注意：實(shí)際上在終端運(yùn)行的是 build 右側(cè)的具體命名

5.自動(dòng)產(chǎn)生 dist 分發(fā)文件夾（壓縮和優(yōu)化后，用于最終運(yùn)行的代碼）

2.Webpack 修改入口和出口

Webpack 配置：影響 Webpack 打包過程 步驟：

項(xiàng)目根目錄，新建 Webpack.config.js 配置文件 導(dǎo)出配置對(duì)象，配置入口，出口文件路徑（別忘了修改磁盤文件夾和文件的名字）

const path = require('path')

module.exports = {

entry: path.resolve(__dirname, 'src/login/index.js'),

output: {

path: path.resolve(__dirname, 'dist'),

filename: './login/index.js'

}

}

??????3.重新打包觀察

3. Webpack 自動(dòng)生成 html 文件

1.插件 html-webpack-plugin 作用：在 Webpack 打包時(shí)生成 html 文件，并引入其他打包后的資源

2.步驟：

1.下載 html-webpack-plugin 本地軟件包到項(xiàng)目中

npm i html-webpack-plugin --save-dev

2.配置 webpack.config.js 讓 Webpack 擁有插件功能

// ...

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {

// ...

plugins: [

new HtmlWebpackPlugin({

template: './public/login.html', // 模板文件

filename: './login/index.html' // 輸出文件

})

]

}

指定以 public/login.html 為模板復(fù)制到 dist/login/index.html，并自動(dòng)引入其他打包后資源 運(yùn)行打包命令，觀察打包后 dist 文件夾下內(nèi)容并運(yùn)行查看效果

4.Webpack-打包 css 代碼

注意：Webpack 默認(rèn)只識(shí)別 JS 和 JSON 文件內(nèi)容，所以想要讓 Webpack 識(shí)別更多不同內(nèi)容，需要使用加載器 介紹需要的 2 個(gè)加載器來輔助 Webpack 才能打包 css 代碼

加載器 css-loader：解析 css 代碼 加載器 style-loader：把解析后的 css 代碼插入到 DOM（style 標(biāo)簽之間） 步驟：

準(zhǔn)備 css 文件引入到 src/login/index.js 中（壓縮轉(zhuǎn)譯處理等）

/**

* 目標(biāo)5：打包 css 代碼

* 5.1 準(zhǔn)備 css 代碼，并引入到 js 中

* 5.2 下載 css-loader 和 style-loader 本地軟件包

* 5.3 配置 webpack.config.js 讓 Webpack 擁有該加載器功能

* 5.4 打包后觀察效果

*/

// 5.1 準(zhǔn)備 css 代碼，并引入到 js 中

import 'bootstrap/dist/css/bootstrap.min.css'

import './index.css'

注意：這里只是引入代碼內(nèi)容讓 Webpack 處理，不需定義變量接收在 JS 代碼中繼續(xù)使用，所以沒有定義變量接收

下載 css-loader 和 style-loader 本地軟件包

npm i css-loader style-loader --save-dev

配置 webpack.config.js 讓 Webpack 擁有該加載器功能

// ...

module.exports = {

// ...

module: { // 加載器

rules: [ // 規(guī)則列表

{

test: /\.css$/i, // 匹配 .css 結(jié)尾的文件

use: ['style-loader', 'css-loader'], // 使用從后到前的加載器來解析 css 代碼和插入到 DOM

}

]

}

};

打包后運(yùn)行 dist/login/index.html 觀察效果，看看準(zhǔn)備好的樣式是否作用在網(wǎng)頁上

5. 優(yōu)化-提取 css 代碼

需求：讓 webpack 把 css 代碼內(nèi)容字符串單獨(dú)提取到 dist 下的 css 文件中 需要：mini-css-extract-plugin 插件來實(shí)現(xiàn) 步驟：

下載 mini-css-extract-plugin 插件軟件包到本地項(xiàng)目中

npm i --save-dev mini-css-extract-plugin

配置 webpack.config.js 讓 Webpack 擁有該插件功能

// ...

const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = {

// ...

module: {

rules: [

{

test: /\.css$/i,

// use: ['style-loader', 'css-loader']

use: [MiniCssExtractPlugin.loader, "css-loader"],

},

],

},

plugins: [

// ...

new MiniCssExtractPlugin()

]

};

打包后觀察效果 注意：不能和 style-loader 一起使用 好處：css 文件可以被瀏覽器緩存，減少 JS 文件體積，讓瀏覽器并行下載 css 和 js 文件

6. 優(yōu)化壓縮過程

需求：把提出的 css 文件內(nèi)樣式代碼壓縮 需要：css-minimizer-webpack-plugin 插件來實(shí)現(xiàn) 步驟： // ...

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {

// ...

// 優(yōu)化

optimization: {

// 最小化

minimizer: [

// 在 webpack@5 中，你可以使用 `...` 語法來擴(kuò)展現(xiàn)有的 minimizer（即

// `terser-webpack-plugin`），將下一行取消注釋（保證 JS 代碼還能被壓縮處理）

`...`,

new CssMinimizerPlugin(),

],

}

};

下載 mini-css-extract-plugin 插件軟件包到本地項(xiàng)目中

npm i css-minimizer-webpack-plugin --save-dev

配置 webpack.config.js 讓 Webpack 擁有該插件功能

// ...

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {

// ...

// 優(yōu)化

optimization: {

// 最小化

minimizer: [

// 在 webpack@5 中，你可以使用 `...` 語法來擴(kuò)展現(xiàn)有的 minimizer（即

// `terser-webpack-plugin`），將下一行取消注釋（保證 JS 代碼還能被壓縮處理）

`...`,

new CssMinimizerPlugin(),

],

}

};

打包后觀察 css 文件內(nèi)自己代碼是否被壓縮了

7. Webpack-打包 less 代碼

需求：把提出的 css 文件內(nèi)樣式代碼壓縮 需要：css-minimizer-webpack-plugin 插件來實(shí)現(xiàn) 步驟：

下載 mini-css-extract-plugin 插件軟件包到本地項(xiàng)目中

npm i css-minimizer-webpack-plugin --save-dev

配置 webpack.config.js 讓 Webpack 擁有該插件功能

// ...

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {

// ...

// 優(yōu)化

optimization: {

// 最小化

minimizer: [

// 在 webpack@5 中，你可以使用 `...` 語法來擴(kuò)展現(xiàn)有的 minimizer（即

// `terser-webpack-plugin`），將下一行取消注釋（保證 JS 代碼還能被壓縮處理）

`...`,

new CssMinimizerPlugin(),

],

}

};

8. Webpack-打包 less 代碼

加載器 less-loader：把 less 代碼編譯為 css 代碼，還需要依賴 less 軟件包 步驟：

新建 login/index.less 文件，設(shè)置背景圖樣式（圖片在配套資料-素材文件夾中）

html {

body {

background: url('./assets/login-bg.png') no-repeat center/cover;

}

}

less 樣式引入到 src/login/index.js 中

/**

* 目標(biāo)8：打包 less 代碼

* 8.1 新建 less 代碼（設(shè)置背景圖）并引入到 src/login/index.js 中

* 8.2 下載 less 和 less-loader 本地軟件包

* 8.3 配置 webpack.config.js 讓 Webpack 擁有功能

* 8.4 打包后觀察效果

*/

// 8.1 新建 less 代碼（設(shè)置背景圖）并引入到 src/login/index.js 中

import './index.less'

下載 less 和 less-loader 本地軟件包

npm i less less-loader --save-dev

配置 webpack.config.js 讓 Webpack 擁有功能

// ...

module.exports = {

// ...

module: {

rules: [

// ...

{

test: /\.less$/i,

use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]

}

]

}

}

9. Webpack-打包圖片

資源模塊：Webpack 內(nèi)置了資源模塊的打包，無需下載額外 loader 步驟：

配置 webpack.config.js 讓 Webpack 擁有打包圖片功能 占位符 【hash】對(duì)模塊內(nèi)容做算法計(jì)算，得到映射的數(shù)字字母組合的字符串 占位符 【ext】使用當(dāng)前模塊原本的占位符，例如：.png / .jpg 等字符串 占位符 【query】保留引入文件時(shí)代碼中查詢參數(shù)（只有 URL 下生效） 注意：判斷臨界值默認(rèn)為 8KB 大于 8KB 文件：發(fā)送一個(gè)單獨(dú)的文件并導(dǎo)出 URL 地址 小于 8KB 文件：導(dǎo)出一個(gè) data URI（base64字符串） 在 src/login/index.js 中給 img 標(biāo)簽添加 logo 圖片

/**

* 目標(biāo)9：打包資源模塊（圖片處理）

* 9.1 創(chuàng)建 img 標(biāo)簽并動(dòng)態(tài)添加到頁面，配置 webpack.config.js

* 9.2 打包后觀察效果和區(qū)別

*/

// 9.1 創(chuàng)建 img 標(biāo)簽并動(dòng)態(tài)添加到頁面，配置 webpack.config.js

// 注意：js 中引入本地圖片資源要用 import 方式（如果是網(wǎng)絡(luò)圖片http地址，字符串可以直接寫）

import imgObj from './assets/logo.png'

const theImg = document.createElement('img')

theImg.src = imgObj

document.querySelector('.login-wrap').appendChild(theImg)

配置 webpack.config.js 讓 Webpack 擁有打包圖片功能

// ...

module.exports = {

// ...

module: {

rules: [

// ...

{

test: /\.(png|jpg|jpeg|gif)$/i,

type: 'asset',

generator: {

filename: 'assets/[hash][ext][query]'

}

}

]

}

}

10.Webpack 搭建開發(fā)環(huán)境

每次改動(dòng)代碼，都要重新打包，很麻煩，所以這里給項(xiàng)目集成 webpack-dev-server 開發(fā)服務(wù)器 作用：?jiǎn)?dòng) Web 服務(wù)，打包輸出源碼在內(nèi)存，并會(huì)自動(dòng)檢測(cè)代碼變化熱更新到網(wǎng)頁 步驟:

下載 webpack-dev-server 軟件包到當(dāng)前項(xiàng)目

npm i webpack-dev-server --save-dev

配置自定義命令，并設(shè)置打包的模式為開發(fā)模式

// ...

module.exports = {

// ...

mode: 'development'

}

"scripts": {

// ...

"dev": "webpack serve --mode=development"

},

使用 npm run dev 來啟動(dòng)開發(fā)服務(wù)器，訪問提示的域名+端口號(hào)，在瀏覽器訪問打包后的項(xiàng)目網(wǎng)頁，修改代碼后試試熱更新效果

在 js / css 文件中修改代碼保存后，會(huì)實(shí)時(shí)反饋到瀏覽器

11. Webpack 打包模式

打包模式：告知 Webpack 使用相應(yīng)模式的內(nèi)置優(yōu)化 分類：

模式名稱模式名字特點(diǎn)場(chǎng)景開發(fā)模式development調(diào)試代碼，實(shí)時(shí)加載，模塊熱替換等本地開發(fā)開發(fā)模式production壓縮代碼，資源優(yōu)化，更輕量等打包上線

如何設(shè)置影響 Webpack呢？

方式1：在 webpack.config.js 配置文件設(shè)置 mode 選項(xiàng)

// ...

module.exports = {

// ...

mode: 'production'

}

方式2：在 package.json 命令行設(shè)置 mode 參數(shù)

"scripts": {

"build": "webpack --mode=production",

"dev": "webpack serve --mode=development"

},

注意：命令行設(shè)置的優(yōu)先級(jí)高于配置文件中的，推薦用命令行設(shè)置 體驗(yàn)：在 build 命令后 修改 mode 的值，打包輸出觀察打包后的 js 文件內(nèi)容

12.Webpack 打包模式的應(yīng)用

需求：在開發(fā)模式下用 style-loader 內(nèi)嵌更快，在生產(chǎn)模式下提取 css 代碼 方案1：webpack.config.js 配置導(dǎo)出函數(shù)，但是局限性大（只接受 2 種模式） 方案2：借助 cross-env （跨平臺(tái)通用）包命令，設(shè)置參數(shù)區(qū)分環(huán)境 方案3：配置不同的 webpack.config.js （適用多種模式差異性較大情況） 主要使用方案 2 嘗試，其他方案可以結(jié)合點(diǎn)擊跳轉(zhuǎn)的官方文檔查看嘗試 步驟：

下載 cross-env 軟件包到當(dāng)前項(xiàng)目

npm i cross-env --save-dev

配置自定義命令，傳入?yún)?shù)名和值（會(huì)綁定到 process.env 對(duì)象下）

在 webpack.config.js 區(qū)分不同環(huán)境使用不同配置

module: {

rules: [

{

test: /\.css$/i,

// use: ['style-loader', "css-loader"],

use: [process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader, "css-loader"]

},

{

test: /\.less$/i,

use: [

// compiles Less to CSS

process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,

'css-loader',

'less-loader',

],

}

],

},

重新打包觀察兩種配置區(qū)別

13.Webpack 前端注入環(huán)境變量

需求：前端項(xiàng)目中，開發(fā)模式下打印語句生效，生產(chǎn)模式下打印語句失效 問題：cross-env 設(shè)置的只在 Node.js 環(huán)境生效，前端代碼無法訪問 process.env.NODE_ENV 解決：使用 Webpack 內(nèi)置的 DefinePlugin 插件 作用：在編譯時(shí)，將前端代碼中匹配的變量名，替換為值或表達(dá)式 配置 webpack.config.js 中給前端注入環(huán)境變量

// ...

const webpack = require('webpack')

module.exports = {

// ...

plugins: [

// ...

new webpack.DefinePlugin({

// key 是注入到打包后的前端 JS 代碼中作為全局變量

// value 是變量對(duì)應(yīng)的值（在 corss-env 注入在 node.js 中的環(huán)境變量字符串）

'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)

})

]

}

14.Webpack 開發(fā)環(huán)境調(diào)錯(cuò) source map

source map：可以準(zhǔn)確追蹤 error 和 warning 在原始代碼的位置 問題：代碼被壓縮和混淆，無法正確定位源代碼位置（行數(shù)和列數(shù)） 設(shè)置：webpack.config.js 配置 devtool 選項(xiàng)

// ...

module.exports = {

// ...

devtool: 'inline-source-map'

}

inline-source-map 選項(xiàng)：把源碼的位置信息一起打包在 JS 文件內(nèi)

注意：source map 適用于開發(fā)環(huán)境，不要在生產(chǎn)環(huán)境使用（防止被輕易查看源碼位置）

15.Webpack 設(shè)置解析別名路徑

解析別名：配置模塊如何解析，創(chuàng)建 import 或 require 的別名，來確保模塊引入變得更簡(jiǎn)單 例如：

原來路徑如下：

import { checkPhone, checkCode } from '../src/utils/check.js'

配置解析別名：在 webpack.config.js 中設(shè)置

// ...

const config = {

// ...

resolve: {

alias: {

'@': path.resolve(__dirname, 'src')

}

}

}

這樣我們以后，引入目標(biāo)模塊寫的路徑就更簡(jiǎn)單了

import { checkPhone, checkCode } from '@/utils/check.js'

修改代碼的路徑后，重新打包觀察效果是否正常！

16.Webpack 多頁面打包

概念：?jiǎn)雾撁妫簡(jiǎn)蝹€(gè) html 文件，切換 DOM 的方式實(shí)現(xiàn)不同業(yè)務(wù)邏輯展示，后續(xù) Vue/React 會(huì)學(xué)到 多頁面：多個(gè) html 文件，切換頁面實(shí)現(xiàn)不同業(yè)務(wù)邏輯展示

需求：把黑馬頭條-數(shù)據(jù)管理平臺(tái)-內(nèi)容頁面一起引入打包使用 步驟：

準(zhǔn)備源碼（html，css，js）放入相應(yīng)位置，并改用模塊化語法導(dǎo)出 下載 form-serialize 包并導(dǎo)入到核心代碼中使用 配置 webpack.config.js 多入口和多頁面的設(shè)置 // ...

const config = {

entry: {

'模塊名1': path.resolve(__dirname, 'src/入口1.js'),

'模塊名2': path.resolve(__dirname, 'src/入口2.js'),

},

output: {

path: path.resolve(__dirname, 'dist'),

filename: './[name]/index.js'

}

plugins: [

new HtmlWebpackPlugin({

template: './public/頁面2.html', // 模板文件

filename: './路徑/index.html', // 輸出文件

chunks: ['模塊名2']

})

new HtmlWebpackPlugin({

template: './public/頁面2.html', // 模板文件

filename: './路徑/index.html', // 輸出文件

chunks: ['模塊名2']

})

]

}

總結(jié)：

1.本文講了什么是webpack

2.webpack的使用

3.webpack關(guān)于打包的相關(guān)知識(shí)

4.webpack關(guān)于環(huán)境的配置

??????小鄭是普通學(xué)生水平，如有紕漏，歡迎各位大佬評(píng)論批評(píng)指正！???

???如果覺得這篇文對(duì)你有幫助的話，也請(qǐng)給個(gè)點(diǎn)贊、收藏下吧，非常感謝!? ? ?

柚子快報(bào)邀請(qǐng)碼778899分享：Webpack看這篇就夠了

http://yzkb.51969.com/

精彩內(nèi)容