上一篇：Node.js與Webpack筆記（一）-CSDN博客

Webpack模塊打包工具

1.Webpack簡(jiǎn)介以及體驗(yàn)

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

• 靜態(tài)模塊：編寫代碼過程中，html，css，js，圖片等固定內(nèi)容的文件
• 打包過程，注意：只有和入口有直接/間接引入關(guān)系的模塊，才會(huì)被打包

2.Webpack的作用

把靜態(tài)模塊內(nèi)容壓縮、整合、轉(zhuǎn)譯等（前端工程化）

• 把 less/sass 轉(zhuǎn)成 css 代碼

• 把 ES6+ 降級(jí)成 ES5 等

• 支持多種模塊文件類型，多種模塊標(biāo)準(zhǔn)語(yǔ)法

• 壓縮，轉(zhuǎn)譯，整合，打包我們的靜態(tài)模塊

4.體驗(yàn)Webpack

如果運(yùn)行package.json里的自定義命令？

npm run 自定義命令

Webpack 默認(rèn)入口和出口？

• src/index.js 和 dist/main.js

入門使用

需求：封裝 utils 包，校驗(yàn)手機(jī)號(hào)和驗(yàn)證碼長(zhǎng)度，在 src/index.js 中使用，使用 Webpack 打包

需求流程圖：

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

npm init -y

2.新建src源代碼文件夾，創(chuàng)建src/utils/check.js工具類，封裝兩個(gè)函數(shù)

// 封裝校驗(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

3.創(chuàng)建src/index.js，導(dǎo)入工具類check.js，調(diào)用封裝好的函數(shù)

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

console.log(checkPhone('13900000000'));
console.log(checkPhone('13900000000000'));
console.log(checkCode('123456'));
console.log(checkCode('12345678'));

4.準(zhǔn)備webpack打包的環(huán)境，下載webpack webpack-cli到項(xiàng)目（版本獨(dú)立）

--save-dev標(biāo)注開發(fā)環(huán)境使用

管理員權(quán)限

npm i webpack webpack-cli --save-dev

5.此時(shí)可以使用webpack的打包命令webpack了

這一段視頻沒細(xì)講，我大概的理解是

webpack打包命令就叫做webpack，但這個(gè)命令是屬于webpack（全局軟件包）的，封裝的是命令工具，然后有句話沒聽懂“為了保證項(xiàng)目之間版本分別獨(dú)立，所以這次比較特殊，下載到某個(gè)項(xiàng)目環(huán)境下，但是需要把 webpack 命令配置到 package.json 的 scripts 自定義命令，作為局部命令使用 ”

反正就是在package.json中的script中，自定義命令（局部命令），命名為build，但實(shí)際上調(diào)用的還是全局命令webpack，只在本項(xiàng)目中使用

6.運(yùn)行工具命令，采用自定義命令的方式（局部命令）

npm run build

7.打包結(jié)果

? ? ? ? 生成dist分發(fā)文件夾（壓縮和優(yōu)化后，最終運(yùn)行的代碼），默認(rèn)生成main.js

5.Webpack修改入口和出口

步驟

1.在項(xiàng)目根目錄，創(chuàng)建Webpack.config.js配置文件

2.根據(jù)文件路徑創(chuàng)建文件夾

3.導(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'
    }
}

4.重新打包觀察

6.黑馬資源刪了太多，轉(zhuǎn)硅谷

官網(wǎng)筆記

Webpack5視頻_Webpack5技術(shù)視頻教程_尚硅谷Webpack5視頻下載 (atguigu.com)

官網(wǎng)文檔是用Vuepress開發(fā)的，暫時(shí)也不清楚這是什么東西，使用方式是（管理員權(quán)限）

7.Webpack初識(shí)

為什么需要打包工具？

開發(fā)時(shí)，我們會(huì)使用框架（React、Vue），ES6 模塊化語(yǔ)法，Less/Sass 等 css 預(yù)處理器等語(yǔ)法進(jìn)行開發(fā)。

這樣的代碼要想在瀏覽器運(yùn)行必須經(jīng)過編譯成瀏覽器能識(shí)別的 JS、Css 等語(yǔ)法，才能運(yùn)行。

所以我們需要打包工具幫我們做完這些事。

除此之外，打包工具還能壓縮代碼、做兼容性處理、提升代碼性能等。

webpack是什么？

Webpack?是一個(gè)靜態(tài)資源打包工具。

它會(huì)以一個(gè)或多個(gè)文件作為打包的入口，將我們整個(gè)項(xiàng)目所有文件編譯組合成一個(gè)或多個(gè)文件輸出出去。

輸出的文件就是編譯好的文件，就可以在瀏覽器段運(yùn)行了。

我們將?Webpack?輸出的文件叫做?bundle。

到底要學(xué)習(xí)webpack什么？

Webpack?本身功能比較少，只能處理?js?、json資源，一旦遇到?css?等其他資源就會(huì)報(bào)錯(cuò)。

所以我們學(xué)習(xí)?Webpack，就是主要學(xué)習(xí)如何處理其他資源。

如果不做任何配置，webpack的功能是很有限的，只能處理js代碼，不能處理樣式代碼等

Webpack 本身功能是有限的:

• 開發(fā)模式：僅能編譯 JS 中的?ES Module?語(yǔ)法

• 生產(chǎn)模式：能編譯 JS 中的?ES Module?語(yǔ)法，還能壓縮 JS 代碼

入門體驗(yàn)

1.資源目錄

webpack_code # 項(xiàng)目根目錄（所有指令必須在這個(gè)目錄運(yùn)行）
    └── src # 項(xiàng)目源碼目錄
        ├── js # js文件目錄
        │   ├── count.js
        │   └── sum.js
        └── main.js # 項(xiàng)目主文件

2.編寫代碼

• count.js

export default function count(x, y){
    return x - y;
}

• sum.js

export default function sum(...args){
    return args.reduce((result, item) => result + item, 0);
}

• main.js

import count from './js/count.js';
import sum from './js/sum.js';

console.log(count(2,1)); // result： 1
console.log(sum(1,2,3,4)); // result： 10

?3.下載依賴

• 初始化package.json

包描述文件package.json中的name值不允許為webpack，因?yàn)楸徽加茫駝twebpack依賴就下載失敗

別忘了看一下默認(rèn)入口是否需要修改

• 下載依賴

下載兩個(gè)依賴，一個(gè)webpack一個(gè)webpack-cli，選擇開發(fā)環(huán)境-D或者-save-dev

4.啟用Webpack打包項(xiàng)目

黑馬這里教的是在package.json的script中，自定義命令"build": "webpack"，將全局命令當(dāng)做局部命令使用

命令npx，這個(gè)命令會(huì)將依賴包中的.bin目錄臨時(shí)添加到環(huán)境變量

可以運(yùn)行這些.cmd程序

• 開發(fā)模式

僅僅對(duì)ES6語(yǔ)法進(jìn)行編譯

npx webpack ./src/main.js --mode=development

打包完成自動(dòng)生成dist文件夾

• 生產(chǎn)模式

不僅編譯ES6語(yǔ)法，還有壓縮等功能

npx webpack ./src/main.js --mode=production

• 總結(jié)

npx webpack: 是用來(lái)運(yùn)行本地安裝 Webpack 包的。

./src/main.js: 指定 Webpack 從 main.js 文件開始打包，不但會(huì)打包 main.js，還會(huì)將其依賴也一起打包進(jìn)來(lái)。

--mode=xxx：指定模式（環(huán)境）。
xxx: development 開發(fā)模式
xxx: production生產(chǎn)模式

5.測(cè)試

創(chuàng)建靜態(tài)html，引入打包輸出的/dist/main.js，查看是否成功打包相關(guān)聯(lián)的三個(gè)js文件

控制臺(tái)效果

8.Webpack5大核心概念

在學(xué)習(xí)配置Webpack之前，先了解核心概念

entry（入口）
指示 Webpack 從哪個(gè)文件開始打包

output（輸出）
指示 Webpack 打包完的文件輸出到哪里去，如何命名等

loader（加載器）
webpack 本身只能處理 js、json 等資源，其他資源需要借助 loader，Webpack 才能解析

plugins（插件）
擴(kuò)展 Webpack 的功能

mode（模式）
主要由兩種模式：

開發(fā)模式：development
生產(chǎn)模式：production

9.Webpack配置 (webpack.config.js)

webpack.config.js配置文件運(yùn)行在node.js環(huán)境中，所以Node.js模塊化使用的是CommonJS模塊化

在項(xiàng)目根目錄創(chuàng)建，注意大小寫

配置一個(gè)等價(jià)于原始webpack功能

注意看，只是配置了，打包入口和出口，配置了開發(fā)模式，無(wú)插件無(wú)加載器，等價(jià)于沒有配置，依舊不能處理樣式文件等，等價(jià)于 npx webpack ./src/main.js --mode=development

// 順序無(wú)要求

// node.js核心模塊path，專門處理路徑
const path = require('path');

module.exports = {
    // 入口
    entry: "./src/main.js",// 使用相對(duì)路徑
    // 全部文件輸出路徑
    output: {
        // __dirname node.js的變量，獲取當(dāng)前項(xiàng)目根目錄的絕對(duì)路徑
        // 第二個(gè)參數(shù)為目標(biāo)文件的文件夾
        path: path.resolve(__dirname, "dist"),
        // 入口文件名
        filename: "main.js",
    },
    // 加載器：
    module: {
        rules: [
            // loader的配置
        ]
    },
    // 插件
    plugins:[
        // plugin的配置
    ],
    // 模式
    mode: "development",// 選擇開發(fā)模式
}

但是，打包命令就可以寫的簡(jiǎn)單一點(diǎn)了

開發(fā)模式配置

開發(fā)模式顧名思義就是我們開發(fā)代碼時(shí)使用的模式。

這個(gè)模式下我們主要做兩件事：

1.編譯代碼，使瀏覽器能識(shí)別運(yùn)行
開發(fā)時(shí)我們有樣式資源、字體圖標(biāo)、圖片資源、html 資源等，webpack 默認(rèn)都不能處理這些資源，所以我們要加載配置來(lái)編譯這些資源

2.代碼質(zhì)量檢查，樹立代碼規(guī)范
提前檢查代碼的一些隱患，讓代碼運(yùn)行時(shí)能更加健壯。

提前檢查代碼規(guī)范和格式，統(tǒng)一團(tuán)隊(duì)編碼風(fēng)格，讓代碼更優(yōu)雅美觀。

處理各種文件資源

本章節(jié)我們學(xué)習(xí)使用 Webpack 如何處理 Css、Less、Sass、Scss、Stylus 樣式資源

Webpack 本身是不能識(shí)別樣式資源的，所以我們需要借助 Loader 來(lái)幫助 Webpack 解析樣式資源

我們找 Loader 都應(yīng)該去官方文檔中找到對(duì)應(yīng)的 Loader，然后使用

官方文檔找不到的話，可以從社區(qū) Github 中搜索查詢

官方文檔：Loaders | webpack 中文文檔 | webpack中文文檔 | webpack中文網(wǎng) (webpackjs.com)

1.處理CSS樣式資源

如果使用css-loader，需要安裝Webpack@5

• 首先需要安裝 css-loader 與 style-loader

// css-loader將css資源編譯成CommonJS的模塊到JS中
npm install --save-dev css-loader

// style-loader將js中的css通過創(chuàng)建style標(biāo)簽的方式添加到html文件中生效
npm install --save-dev style-loader 

• 創(chuàng)建.css文件

span {
    color: red;
}

• 在入口文件導(dǎo)入css文件

• 配置

// node.js核心模塊path，專門處理路徑
const path = require('path');

module.exports = {
    // 入口
    entry: "./src/main.js",// 使用相對(duì)路徑
    // 輸出
    output: {
        // __dirname node.js的變量，獲取當(dāng)前項(xiàng)目根目錄的絕對(duì)路徑
        // 第二個(gè)參數(shù)為目標(biāo)文件的文件夾
        path: path.resolve(__dirname, "dist"),
        // 入口文件名
        filename: "main.js",
    },
    // 加載器：
    module: {
        rules: [
            // loader的配置
            {
                // 正則匹配一個(gè) 以 .css結(jié)尾的文件
                test: /\.css$/,
                // use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
                // style-loader將js中的css通過創(chuàng)建style標(biāo)簽添加到html文件中生效
                // css-loader將css資源編譯成CommonJS的模塊到j(luò)s中
                use: ['style-loader', 'css-loader'],
            },
        ]
    },
    // 插件
    plugins:[
        // plugin的配置
    ],
    // 模式
    mode: "development",// 選擇開發(fā)模式
}

• 運(yùn)行webpack

2.處理Less、Sass、Scss、Stylus樣式資源

CSS、less、Sass、Scss、Stylus的認(rèn)識(shí)-CSDN博客

css-loader | webpack 中文文檔 | webpack中文文檔 | webpack中文網(wǎng) (webpackjs.com)

暫時(shí)只學(xué)過Sass，就不詳細(xì)寫了，這段教程跳過，配置也差不多，唯一注意Scss是Sass的升級(jí)版，其實(shí)一樣的，需要什么loader直接下載就好

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用來(lái)匹配 .css 結(jié)尾的文件
        test: /\.css$/,
        // use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

3.處理圖片資源

過去在 Webpack4 時(shí)，我們處理圖片資源通過?file-loader?和?url-loader?進(jìn)行處理

現(xiàn)在 Webpack5 已經(jīng)將兩個(gè) Loader 功能內(nèi)置到 Webpack 里了，我們只需要簡(jiǎn)單配置即可處理圖片資源

在官網(wǎng)搜索“資源模塊”，有相關(guān)內(nèi)容

資源模塊 | webpack 中文文檔 | webpack中文文檔 | webpack中文網(wǎng) (webpackjs.com)

• 配置

圖形優(yōu)化，將小于某個(gè)大小的圖片轉(zhuǎn)化成 data URI 形式（Base64 格式）

// node.js核心模塊path，專門處理路徑
const path = require('path');

module.exports = {
    // 入口
    entry: "./src/main.js",// 使用相對(duì)路徑
    // 輸出
    output: {
        // __dirname node.js的變量，獲取當(dāng)前項(xiàng)目根目錄的絕對(duì)路徑
        // 第二個(gè)參數(shù)為目標(biāo)文件的文件夾
        path: path.resolve(__dirname, "dist"),
        // 入口文件名
        filename: "main.js",
    },
    // 加載器：
    module: {
        rules: [
            // loader的配置
            {
                // 正則匹配一個(gè) 以 .css結(jié)尾的文件
                test: /\.css$/,
                // use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
                // style-loader將js中的css通過創(chuàng)建style標(biāo)簽添加到html文件中生效
                // css-loader將css資源編譯成CommonJS的模塊到j(luò)s中
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"],
            },
            {
                test: /\.s[ac]ss$/,
                use: ["style-loader", "css-loader", "sass-loader"],
            },
            {
                test: /\.styl$/,
                use: ["style-loader", "css-loader", "stylus-loader"],
            },
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                      maxSize: 10 * 1024 // 小于10kb的圖片，轉(zhuǎn)換base64的字符串
                    },
                },
            }
        ]
    },
    // 插件
    plugins:[
        // plugin的配置
    ],
    // 模式
    mode: "development",// 選擇開發(fā)模式
}

• 準(zhǔn)備資源

準(zhǔn)備一個(gè)盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../dist/main.js"></script>
</head>
<body>
    <span>hello webpack</span>
    <br>
    <!-- <div class="imgDiv01">
        <img src="../img/01.png" alt="圖片加載失敗喔，原圖片是個(gè)科技臉美女">
        <img src="../img/02.png" alt="加載失敗">
    </div> -->
    <div class="imgDiv01">
        
    </div>
</body>
</html>

準(zhǔn)備樣式，被盒子背景插個(gè)圖片

span {
    color: red;
}
.imgDiv01{
    /* max-width: 100%;
    height: auto; */
    width: 100px;
    height: 100px;
    background-image: url('../../img/01.png');
    background-size: cover;
}

• 打包

此時(shí)會(huì)發(fā)現(xiàn)輸出目錄dist里多了一張圖片（如果圖片小于10kb，那么依舊會(huì)下載js文件中）

• ?運(yùn)行

4.為什么樣式文件沒有單獨(dú)輸出為一個(gè)文件，而是寫在js中？

因?yàn)榻?jīng)過?style-loader?的處理，樣式資源打包到 main.js 里面去了，所以沒有額外輸出出來(lái)

5.修改輸出文件目錄

打包后輸出的文件全放在dist目錄中，太亂了，自定義輸出文件目錄，使得圖片在img，js在js等

// [hash]表示會(huì)生成一個(gè)唯一的id
// [ext]表示原來(lái)是什么后綴擴(kuò)展名，那么依舊生成什么后綴
// [query]表示有時(shí)候這個(gè)文件名后可以帶有參數(shù)
generator: {
         filename: 'static/[hash][ext][query]'
       }

?

hash值生成默認(rèn)20位，可以只取前8位?

• 修改JS文件輸出目錄

• 修改圖片文件輸出目錄

官網(wǎng)搜索 asset

webpack 中文文檔 | webpack中文文檔 | webpack中文網(wǎng) (webpackjs.com)

// node.js核心模塊path，專門處理路徑
const path = require('path');

module.exports = {
    // 入口
    entry: "./src/main.js",// 使用相對(duì)路徑
    // 輸出
    output: {
        // __dirname node.js的變量，獲取當(dāng)前項(xiàng)目根目錄的絕對(duì)路徑
        // 第二個(gè)參數(shù)為目標(biāo)文件的文件夾
        path: path.resolve(__dirname, "dist"),
        // 入口文件名
        filename: "js/main.js",
    },
    // 加載器：
    module: {
        rules: [
            // loader的配置
            {
                // 正則匹配一個(gè) 以 .css結(jié)尾的文件
                test: /\.css$/,
                // use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
                // style-loader將js中的css通過創(chuàng)建style標(biāo)簽添加到html文件中生效
                // css-loader將css資源編譯成CommonJS的模塊到j(luò)s中
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"],
            },
            {
                test: /\.s[ac]ss$/,
                use: ["style-loader", "css-loader", "sass-loader"],
            },
            {
                test: /\.styl$/,
                use: ["style-loader", "css-loader", "stylus-loader"],
            },
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                      maxSize: 10 * 1024 // 小于10kb的圖片，轉(zhuǎn)換base64的字符串
                    },
                },
                generator: {
                    filename: 'static/img/[hash][ext][query]',
                }
            }
        ]
    },
    // 插件
    plugins:[
        // plugin的配置
    ],
    // 模式
    mode: "development",// 選擇開發(fā)模式
}

6.打包時(shí)自動(dòng)清空上次打包資源

webpack5新出的命令clean

7.處理文字圖標(biāo)資源

阿里巴巴矢量圖標(biāo)庫(kù)：iconfont-阿里巴巴矢量圖標(biāo)庫(kù)

bootstrap圖標(biāo)庫(kù)：Bootstrap 圖標(biāo)庫(kù) · Bootstrap 官方開源圖標(biāo)（icon）庫(kù) (bootcss.com)

我們這里使用阿里巴巴矢量圖標(biāo)庫(kù)

• 選擇自己喜歡的圖標(biāo)然后入庫(kù)

• 將圖標(biāo)添加到項(xiàng)目中

• 一鍵下載至本地

• 解壓后瀏覽器運(yùn)行index文件查看教程

一般使用Font class，兼容性ie8，代碼最簡(jiǎn)潔

1. 引入.css

2. 使用類名標(biāo)注

• 將css文件復(fù)制到項(xiàng)目中

新的css別忘記引入入口文件

• 將css依賴的字體文件復(fù)制到項(xiàng)目中

• 修改依賴的字體文件的路徑

• 配置字體圖標(biāo)輸出路徑

// node.js核心模塊path，專門處理路徑
const path = require('path');

module.exports = {
    // 入口
    entry: "./src/main.js",// 使用相對(duì)路徑
    // 輸出
    output: {
        // __dirname node.js的變量，獲取當(dāng)前項(xiàng)目根目錄的絕對(duì)路徑
        // 第二個(gè)參數(shù)為目標(biāo)文件的文件夾
        path: path.resolve(__dirname, "dist"),
        // 入口文件名
        filename: "./js/main.js",
        clean: true,
    },
    // 加載器：
    module: {
        rules: [
            // loader的配置
            {
                // 正則匹配一個(gè) 以 .css結(jié)尾的文件
                test: /\.css$/,
                // use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
                // style-loader將js中的css通過創(chuàng)建style標(biāo)簽添加到html文件中生效
                // css-loader將css資源編譯成CommonJS的模塊到j(luò)s中
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"],
            },
            {
                test: /\.s[ac]ss$/,
                use: ["style-loader", "css-loader", "sass-loader"],
            },
            {
                test: /\.styl$/,
                use: ["style-loader", "css-loader", "stylus-loader"],
            },
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                      maxSize: 10 * 1024 // 小于10kb的圖片，轉(zhuǎn)換base64的字符串
                    },
                },
                generator: {
                    filename: './static/img/[hash:8][ext][query]',
                }
            },
            // 處理字體圖標(biāo)文件
            {
                test: /\.(ttf|woff2?)$/,
                type: "asset/resource",
                generator: {
                    filename: './static/media/[hash:8][ext][query]',
                }
            }
        ]
    },
    // 插件
    plugins:[
        // plugin的配置
    ],
    // 模式
    mode: "development",// 選擇開發(fā)模式
}

8.type: asset與 type: asset/resource的區(qū)別

1. type: "asset/resource"?相當(dāng)于file-loader, 將文件轉(zhuǎn)化成 Webpack 能識(shí)別的資源，其他不做處理
2. type: "asset"?相當(dāng)于url-loader, 將文件轉(zhuǎn)化成 Webpack 能識(shí)別的資源，同時(shí)小于某個(gè)大小的資源會(huì)處理成 data URI 形式

9.處理音視頻資源

webpack會(huì)對(duì)音視頻資源原封不動(dòng)的輸出出去，不會(huì)做任何改動(dòng)

打包后發(fā)現(xiàn)并不會(huì)輸出視頻文件到dist目錄中

10.處理JS文件資源

有人可能會(huì)問，js 資源 Webpack 不能已經(jīng)處理了嗎，為什么我們還要處理呢？

原因是 Webpack 對(duì) js 處理是有限的，只能編譯 js 中 ES 模塊化語(yǔ)法，不能編譯其他語(yǔ)法，導(dǎo)致 js 不能在 IE 等瀏覽器運(yùn)行，IE瀏覽器根本不支持任何ES6語(yǔ)法，所以我們希望做一些兼容性處理，至少能在IE11看到運(yùn)行效果。

其次開發(fā)中，團(tuán)隊(duì)對(duì)代碼格式是有嚴(yán)格要求的，多個(gè)程序猿開發(fā)同一個(gè)項(xiàng)目需要規(guī)范格式，我們不能由肉眼去檢測(cè)代碼格式，需要使用專業(yè)的工具來(lái)檢測(cè)。

• 針對(duì) js 兼容性處理，我們使用 Babel 來(lái)完成
• 針對(duì)代碼格式，我們使用 Eslint 來(lái)完成

我們先完成 Eslint，檢測(cè)代碼格式無(wú)誤后，在由 Babel 做代碼兼容性處理

11.Eslint介紹

官網(wǎng)：文檔 - ESLint 中文網(wǎng) (nodejs.cn)

是一個(gè)可組裝的 JavaScript 和 JSX 檢查工具。

這句話意思就是：它是用來(lái)檢測(cè) js 和 jsx 語(yǔ)法的工具，可以配置各項(xiàng)功能

我們使用 Eslint，關(guān)鍵是寫 Eslint 配置文件，里面寫上各種 rules 規(guī)則，將來(lái)運(yùn)行 Eslint 時(shí)就會(huì)以寫的規(guī)則對(duì)代碼進(jìn)行檢查

• 為什么Eslint支持JS原生和React的JSX，而不支持VUE呢？

Eslint的開發(fā)團(tuán)隊(duì)是Facebook旗下的，自然要支持自家的React

不過不用擔(dān)心，Eslint是一個(gè)可組裝的工具，添加一些插件，就支持VUE模板語(yǔ)法了

• Eslint的配置文件有至少四種寫法

ESLint 會(huì)查找和自動(dòng)讀取它們，所以以上配置文件只需要存在一個(gè)即可

js格式可以寫注釋，更符合日常寫代碼的習(xí)慣，所以選擇js格式

module.exports = {
  // 解析選項(xiàng)
  parserOptions: {},
  // 具體檢查規(guī)則
  rules: {},
  // 繼承其他規(guī)則
  extends: [],
  // ...
};

• parserOptions解析選項(xiàng)

parserOptions: {
  ecmaVersion: 6, // ES 語(yǔ)法版本
  sourceType: "module", // ES 模塊化
  ecmaFeatures: { // ES 其他特性
    jsx: true // 如果是 React 項(xiàng)目，就需要開啟 jsx 語(yǔ)法
  }
}

• rules規(guī)則

• "off"?或?0?- 關(guān)閉規(guī)則
• "warn"?或?1?- 開啟規(guī)則，使用警告級(jí)別的錯(cuò)誤：warn?(不會(huì)導(dǎo)致程序退出)
• "error"?或?2?- 開啟規(guī)則，使用錯(cuò)誤級(jí)別的錯(cuò)誤：error?(當(dāng)被觸發(fā)的時(shí)候，程序會(huì)退出)

官方規(guī)則文檔：規(guī)則參考 - ESLint - 插件化的 JavaScript 代碼檢查工具

rules: {
  semi: "error", // 禁止使用分號(hào)
  'array-callback-return': 'warn', // 強(qiáng)制數(shù)組方法的回調(diào)函數(shù)中有 return 語(yǔ)句，否則警告
  'default-case': [
    'warn', // 要求 switch 語(yǔ)句中有 default 分支，否則警告
    { commentPattern: '^no default$' } // 允許在最后注釋 no default, 就不會(huì)有警告了
  ],
  eqeqeq: [
    'warn', // 強(qiáng)制使用 === 和 !==，否則警告
    'smart' // https://eslint.org/docs/latest/rules/eqeqeq#smart 
//除了少數(shù)情況下不會(huì)有警告
  ],
}

• ?extends繼承

開發(fā)中一點(diǎn)點(diǎn)寫 rules 規(guī)則太費(fèi)勁了，所以有更好的辦法，繼承現(xiàn)有的規(guī)則。

繼承官方的規(guī)則不用下載，如果其他規(guī)則需要下載

// 例如在React項(xiàng)目中，我們可以這樣寫配置
module.exports = {
  extends: ["react-app"],
  rules: {
    // 我們的規(guī)則會(huì)覆蓋掉react-app的規(guī)則
    // 所以想要修改規(guī)則直接改就是了
    eqeqeq: ["warn", "smart"],
  },
};

• Eslint官方內(nèi)置規(guī)則?規(guī)則參考 - ESLint - 插件化的 JavaScript 代碼檢查工具

在配置文件中寫上?"extends": "eslint:recommended"

• Vue-cli官方的規(guī)則?vue-cli/packages/@vue/cli-plugin-eslint at dev · vuejs/vue-cli · GitHub
• React-cli官方的規(guī)則?create-react-app/packages/eslint-config-react-app at main · facebook/create-react-app · GitHub

12.在webpack5中使用Eslint

在webpack4中是用一個(gè)loader處理Eslint，在webpack5中則是plugin

EslintWebpackPlugin | webpack 中文文檔 | webpack中文文檔 | webpack中文網(wǎng) (webpackjs.com)

測(cè)試需求，配置檢查src下的所有文件不能出現(xiàn)var變量

• 安裝插件

npm i eslint eslint-webpack-plugin --save-dev

?

• 定義.eslintrc.js配置文件

module.exports = {
    // 繼承 Eslint 規(guī)則
    extends: ["eslint:recommended"],
    env: {
      node: true, // 啟用node中全局變量
      browser: true, // 啟用瀏覽器中全局變量
    },
    parserOptions: {
      ecmaVersion: 6,
      sourceType: "module",
    },
    rules: {
      "no-var": 2, // 不能使用 var 定義變量
    },
  };
  

• webpack.config.js中引入與管理插件

// node.js核心模塊path，專門處理路徑
const path = require('path');

// Eslint插件
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
    // 入口
    entry: "./src/main.js",// 使用相對(duì)路徑
    // 輸出
    output: {
        // __dirname node.js的變量，獲取當(dāng)前項(xiàng)目根目錄的絕對(duì)路徑
        // 第二個(gè)參數(shù)為目標(biāo)文件的文件夾
        path: path.resolve(__dirname, "dist"),
        // 入口文件名
        filename: "./js/main.js",
        clean: true,
    },
    // 加載器：
    module: {
        rules: [
            // loader的配置
            {
                // 正則匹配一個(gè) 以 .css結(jié)尾的文件
                test: /\.css$/,
                // use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
                // style-loader將js中的css通過創(chuàng)建style標(biāo)簽添加到html文件中生效
                // css-loader將css資源編譯成CommonJS的模塊到j(luò)s中
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"],
            },
            {
                test: /\.s[ac]ss$/,
                use: ["style-loader", "css-loader", "sass-loader"],
            },
            {
                test: /\.styl$/,
                use: ["style-loader", "css-loader", "stylus-loader"],
            },
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                      maxSize: 10 * 1024 // 小于10kb的圖片，轉(zhuǎn)換base64的字符串
                    },
                },
                generator: {
                    filename: './static/img/[hash:8][ext][query]',
                }
            },
            // 處理字體圖標(biāo)文件,以及媒體文件
            {
                test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
                type: "asset/resource",
                generator: {
                    filename: './static/media/[hash:8][ext][query]',
                }
            }
        ]
    },
    // 插件
    plugins:[
        // plugin的配置
        new ESLintPlugin({
            // context指定需要檢查的文件根目錄，即src下的所有文件都會(huì)被檢查
            context: path.resolve(__dirname, './src'),
        }),
    ],
    // 模式
    mode: "development",// 選擇開發(fā)模式
}

• 故意犯錯(cuò)?

?

• 打包結(jié)果

13.VSCode-Eslint插件

這個(gè)插件可以實(shí)時(shí)檢測(cè)代碼格式，就不用編譯的時(shí)候才去報(bào)錯(cuò)了

但是此時(shí)就會(huì)對(duì)項(xiàng)目所有文件默認(rèn)進(jìn)行 Eslint 檢查了，我們 dist 目錄下的打包后文件就會(huì)報(bào)錯(cuò)。但是我們開發(fā)時(shí)候只需要檢查 src 下面自己寫的源代碼，不需要檢查 dist 下面的文件。

所以可以使用 Eslint 忽略文件解決。在項(xiàng)目根目錄新建下面文件:

• .eslintignore

# 忽略dist目錄下所有文件
dist

?.eslintignore有可能不生效，有一個(gè)辦法是在.eslintrc.js中寫上：

網(wǎng)上也有其他辦法，但是暫時(shí)也不會(huì)用

VSCode ESLint 插件 .eslintignore 文件不生效原因[轉(zhuǎn)] – 后除 (mazey.net)

• .eslintrc.js

module.exports = {
    // 繼承 Eslint 規(guī)則
    extends: ["eslint:recommended"],
    env: {
      node: true, // 啟用node中全局變量
      browser: true, // 啟用瀏覽器中全局變量
    },
    parserOptions: {
      ecmaVersion: 6,
      sourceType: "module",
    },
    rules: {
      "no-var": 2, // 不能使用 var 定義變量
    },
    ignorePatterns: ["dist"],
  };
  

14.Babel介紹

Babal在webpack中是用一個(gè)loader去處理

babel-loader | webpack 中文文檔 | webpack中文文檔 | webpack中文網(wǎng) (webpackjs.com)

Babel 是什么？ · Babel 中文文檔 | Babel中文網(wǎng) (babeljs.cn)

JavaScript 編譯器。

主要用于將 ES6 語(yǔ)法編寫的代碼轉(zhuǎn)換為向后兼容的 JavaScript 語(yǔ)法，以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其他環(huán)境中，比如ES6的箭頭函數(shù)等，typescript等

配置文件由很多種寫法：

• babel.config.*：新建文件，位于項(xiàng)目根目錄
  • babel.config.js
  • babel.config.json
• .babelrc.*：新建文件，位于項(xiàng)目根目錄
  • .babelrc
  • .babelrc.js
  • .babelrc.json
• package.json?中?babel：不需要?jiǎng)?chuàng)建文件，在原有文件基礎(chǔ)上寫

Babel 會(huì)查找和自動(dòng)讀取它們，所以以上配置文件只需要存在一個(gè)即可

這里選擇js文件的形式配置

• babel的預(yù)設(shè)

babel本身什么都做不了，它的關(guān)鍵在于它的預(yù)設(shè)presets

簡(jiǎn)單理解：就是一組 Babel 插件, 擴(kuò)展 Babel 功能

• @babel/preset-env: 一個(gè)智能預(yù)設(shè)，允許您使用最新的 JavaScript。
• @babel/preset-react：一個(gè)用來(lái)編譯 React jsx 語(yǔ)法的預(yù)設(shè)
• @babel/preset-typescript：一個(gè)用來(lái)編譯 TypeScript 語(yǔ)法的預(yù)設(shè)

15.在Webpack5中使用Babel

• 安裝依賴

npm install -D babel-loader @babel/core @babel/preset-env

• 根目錄創(chuàng)建babel.config.js

module.exports = {
    // @babel/preset-env: 一個(gè)智能預(yù)設(shè)，允許您使用最新的 JavaScript。
    // @babel/preset-react：一個(gè)用來(lái)編譯 React jsx 語(yǔ)法的預(yù)設(shè)
    // @babel/preset-typescript：一個(gè)用來(lái)編譯 TypeScript 語(yǔ)法的預(yù)設(shè)
    presets: ["@babel/preset-env"],
}

• webpack.config.js引入loader

// node.js核心模塊path，專門處理路徑
const path = require('path');

// Eslint插件
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
    // 入口
    entry: "./src/main.js",// 使用相對(duì)路徑
    // 輸出
    output: {
        // __dirname node.js的變量，獲取當(dāng)前項(xiàng)目根目錄的絕對(duì)路徑
        // 第二個(gè)參數(shù)為目標(biāo)文件的文件夾
        path: path.resolve(__dirname, "dist"),
        // 入口文件名
        filename: "./js/main.js",
        clean: true,
    },
    // 加載器：
    module: {
        rules: [
            // loader的配置
            {
                // 正則匹配一個(gè) 以 .css結(jié)尾的文件
                test: /\.css$/,
                // use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
                // style-loader將js中的css通過創(chuàng)建style標(biāo)簽添加到html文件中生效
                // css-loader將css資源編譯成CommonJS的模塊到j(luò)s中
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"],
            },
            {
                test: /\.s[ac]ss$/,
                use: ["style-loader", "css-loader", "sass-loader"],
            },
            {
                test: /\.styl$/,
                use: ["style-loader", "css-loader", "stylus-loader"],
            },
            { 
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                      maxSize: 10 * 1024 // 小于10kb的圖片，轉(zhuǎn)換base64的字符串
                    },
                },
                generator: {
                    filename: './static/img/[hash:8][ext][query]',
                }
            },
            // 處理字體圖標(biāo)文件,以及媒體文件
            {
                test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
                type: "asset/resource",
                generator: {
                    filename: './static/media/[hash:8][ext][query]',
                }
            },
            // Babel, JS解析器
            {
                test: /\.js$/, 
                exclude: /node_modules/, // 第三方的js文件我們不處理，exclude: 排除
                loader: 'babel-loader',
              },
        ]
    },
    // 插件
    plugins:[
        // plugin的配置
        new ESLintPlugin({
            // context指定需要檢查的文件根目錄，即src下的所有文件都會(huì)被檢查
            context: path.resolve(__dirname, './src'),
        }),
    ],
    // 模式
    mode: "development",// 選擇開發(fā)模式
}

• 打包測(cè)試

源輸出js還有ES6的箭頭函數(shù)

變成ES5寫法了

16.處理HTML資源

HTML不再需要自己手動(dòng)引入打包后的js文件了，千萬(wàn)不要手動(dòng)引入了

新的html文件有兩個(gè)特點(diǎn)：1. 內(nèi)容和源文件一致 2. 自動(dòng)引入打包生成的js等資源

該插件將為你生成一個(gè) HTML5 文件， 在 body 中使用?script?標(biāo)簽引入你所有 webpack 生成的 bundle。??

如果你有多個(gè) webpack 入口，他們都會(huì)在已生成 HTML 文件中的?<script>?標(biāo)簽內(nèi)引入。

如果在 webpack 的輸出中有任何 CSS 資源（例如，使用?MiniCssExtractPlugin?提取的 CSS），那么這些資源也會(huì)在 HTML 文件?<head>?元素中的?<link>?標(biāo)簽內(nèi)引入。

webpack官網(wǎng)搜索：HtmlWebpackPlugin

HtmlWebpackPlugin | webpack 中文文檔 | webpack中文文檔 | webpack中文網(wǎng) (webpackjs.com)

• webpack.config.js

// node.js核心模塊path，專門處理路徑
const path = require('path');

// 處理HTML文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// Eslint插件
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
    // 入口
    entry: "./src/main.js",// 使用相對(duì)路徑
    // 輸出
    output: {
        // __dirname node.js的變量，獲取當(dāng)前項(xiàng)目根目錄的絕對(duì)路徑
        // 第二個(gè)參數(shù)為目標(biāo)文件的文件夾
        path: path.resolve(__dirname, "dist"),
        // 入口文件名
        filename: "./js/main.js",
        clean: true,
    },
    // 加載器：
    module: {
        rules: [
            // loader的配置
            {
                // 正則匹配一個(gè) 以 .css結(jié)尾的文件
                test: /\.css$/,
                // use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
                // style-loader將js中的css通過創(chuàng)建style標(biāo)簽添加到html文件中生效
                // css-loader將css資源編譯成CommonJS的模塊到j(luò)s中
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"],
            },
            {
                test: /\.s[ac]ss$/,
                use: ["style-loader", "css-loader", "sass-loader"],
            },
            {
                test: /\.styl$/,
                use: ["style-loader", "css-loader", "stylus-loader"],
            },
            { 
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                      maxSize: 10 * 1024 // 小于10kb的圖片，轉(zhuǎn)換base64的字符串
                    },
                },
                generator: {
                    filename: './static/img/[hash:8][ext][query]',
                }
            },
            // 處理字體圖標(biāo)文件,以及媒體文件
            {
                test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
                type: "asset/resource",
                generator: {
                    filename: './static/media/[hash:8][ext][query]',
                }
            },
            // Babel, JS解析器
            {
                test: /\.js$/, 
                exclude: /node_modules/, // 第三方的js文件我們不處理，exclude: 排除
                loader: 'babel-loader',
              },
        ]
    },
    // 插件
    plugins:[
        // plugin的配置
        new ESLintPlugin({
            // context指定需要檢查的文件根目錄，即src下的所有文件都會(huì)被檢查
            context: path.resolve(__dirname, './src'),
        }),
        new HtmlWebpackPlugin({
            // 以 public/index.html 為模板創(chuàng)建文件
            // 新的html文件有兩個(gè)特點(diǎn)：1. 內(nèi)容和源文件一致 2. 自動(dòng)引入打包生成的js等資源
            template: path.resolve(__dirname, "public/index.html"),
        })
    ],
    // 模式
    mode: "development",// 選擇開發(fā)模式
}

以原h(huán)tml為模板，輸出一個(gè)新的html，并且自動(dòng)引入多個(gè)bundle，相關(guān)依賴也自動(dòng)引入，有多少引入多少

• 打包

• 運(yùn)行依舊沒問題

開發(fā)服務(wù)器&自動(dòng)化

每次改動(dòng)代碼后需要重新編譯打包npx webpack，也可以自動(dòng)化

webpack-dev-server是webpack官方提供的一個(gè)小型Express服務(wù)器。使用它可以為webpack打包生成的資源文件提供web服務(wù)。

主要提供了2個(gè)功能：

1. 為靜態(tài)文件提供服務(wù)
2. 自動(dòng)刷新和熱替換(HMR)

并且當(dāng)你使用開發(fā)服務(wù)器時(shí)，所有代碼都會(huì)在內(nèi)存中編譯打包，并不會(huì)輸出到 dist 目錄下。

開發(fā)時(shí)我們只關(guān)心代碼能運(yùn)行，有效果即可，至于代碼被編譯成什么樣子，我們并不需要知道。

• 安裝依賴

npm i webpack-dev-server -D

• webpack.config.js

// node.js核心模塊path，專門處理路徑
const path = require('path');

// 處理HTML文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// Eslint插件
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
    // 入口
    entry: "./src/main.js",// 使用相對(duì)路徑
    // 輸出
    output: {
        // __dirname node.js的變量，獲取當(dāng)前項(xiàng)目根目錄的絕對(duì)路徑
        // 第二個(gè)參數(shù)為目標(biāo)文件的文件夾
        path: path.resolve(__dirname, "dist"),
        // 入口文件名
        filename: "./js/main.js",
        clean: true,
    },
    // 加載器：
    module: {
        rules: [
            // loader的配置
            {
                // 正則匹配一個(gè) 以 .css結(jié)尾的文件
                test: /\.css$/,
                // use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
                // style-loader將js中的css通過創(chuàng)建style標(biāo)簽添加到html文件中生效
                // css-loader將css資源編譯成CommonJS的模塊到j(luò)s中
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"],
            },
            {
                test: /\.s[ac]ss$/,
                use: ["style-loader", "css-loader", "sass-loader"],
            },
            {
                test: /\.styl$/,
                use: ["style-loader", "css-loader", "stylus-loader"],
            },
            { 
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                      maxSize: 10 * 1024 // 小于10kb的圖片，轉(zhuǎn)換base64的字符串
                    },
                },
                generator: {
                    filename: './static/img/[hash:8][ext][query]',
                }
            },
            // 處理字體圖標(biāo)文件,以及媒體文件
            {
                test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
                type: "asset/resource",
                generator: {
                    filename: './static/media/[hash:8][ext][query]',
                }
            },
            // Babel, JS解析器
            {
                test: /\.js$/, 
                exclude: /node_modules/, // 第三方的js文件我們不處理，exclude: 排除
                loader: 'babel-loader',
              },
        ]
    },
    // 插件
    plugins:[
        // plugin的配置
        new ESLintPlugin({
            // context指定需要檢查的文件根目錄，即src下的所有文件都會(huì)被檢查
            context: path.resolve(__dirname, './src'),
        }),
        new HtmlWebpackPlugin({
            // 以 public/index.html 為模板創(chuàng)建文件
            // 新的html文件有兩個(gè)特點(diǎn)：1. 內(nèi)容和源文件一致 2. 自動(dòng)引入打包生成的js等資源
            template: path.resolve(__dirname, "public/index.html"),
        })
    ],
    // 開發(fā)服務(wù)器
    devServer: {
        host: "localhost", // 啟動(dòng)服務(wù)器域名
        port: "3030", // 啟動(dòng)服務(wù)器端口號(hào)
        open: true, // 是否自動(dòng)打開瀏覽器
    },
    // 模式
    mode: "development",// 選擇開發(fā)模式
}

?運(yùn)行指令

不是npx webpack

npx webpack serve

關(guān)閉服務(wù)器?

ctrl + c

問題：視頻文件失效了

ChatGPT告訴我：webpack-dev-server默認(rèn)是不支持在內(nèi)存中存儲(chǔ)二進(jìn)制文件（例如視頻文件）的

將視頻文件放置在public目錄下，與index.html放在一起然后重新啟動(dòng)webpack-dev-server，視頻就可以正常播放了，雖然我不清楚這有什么區(qū)別, 但確實(shí)有用。

(本節(jié)完)

下一節(jié)：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-838050.html

到了這里，關(guān)于Node.js與Webpack筆記（二）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！