前端工程师必须掌握—《Webpack教程》

蔚落 2023-09-27 13:30 65阅读 0赞

## Webpack ##

[学习视频地址][Link 1]

#### 文章目录 ####

*  Webpack
 *   *  1.webpack基础
     *   *  1.1.初始化隔行变色的案例
         *  1.2.安装和配置webpack
         *   *  1.2.1.安装webpack
             *  1.2.2.配置webpack
             *  1.2.3.了解mode可选值的应用场景
             *  1.2.4.自定义打包的入口和出口
     *  2.插件
     *   *  2.1.安装和配置webpack-dev-server
         *   *  2.1.1.安装webpack-dev-server
             *  2.1.2.配置webpack-dev-server
         *  2.2.安裝和配置html-webpack-plugin
         *   *  2.2.1.安装html-webpack-plugin
             *  2.2.2.配置html-webpack-plugin
             *  2.2.3.devServer节点
     *  3.loader
     *   *  3.1.loader概述
         *  3.2.打包处理css文件
         *  3.3.打包处理less文件
         *  3.4.演示图片loader加载的问题
         *   *  3.4.1.配置加载图片的loader
             *   *  3.4.1.1.打包处理样式表中与url路径相关的文件
         *  3.5.打包处理js文件中的高级语法
         *   *  3.5.1.安装babel-loader相关的包
             *  3.5.2.配置babel-loader
     *  4.发布
     *   *  4.1.配置build命令
         *   *  4.1.1.配置webpack的打包发布
         *  4.2.优化图片和js文件的存放路径
         *  4.3.配置和使用clean-webpack-plugin插件自动删除dist目录
         *   *  4.3.1.自动清理dist目录下的旧文件
     *  5.Source Map
     *   *  5.1.概述
         *  5.2.默认Source Map的问题
         *  5.3.解决默认Source Map的问题
         *  5.4.只定位行不暴露源码
         *  5.5.Source Map的最佳实践
     *  6.webpack中 @ 的原理和好处

### 1.webpack基础 ###

#### 1.1.初始化隔行变色的案例 ####

1.新建一个英文路径下的根目录，在根目录的终端中输入以下命令

npm init -y

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VHokc8oQ-1671884900117)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221213211950758.png)\]][img-VHokc8oQ-1671884900117_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213211950758.png]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8XDiW7pt-1671884900119)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221213212136135.png)\]][img-8XDiW7pt-1671884900119_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213212136135.png]

2.在根目录下中新建src目录，在src目录下新建index.html和index.js

> index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./index.js"></script>
    </head>
    <body>
        <ul>
            <li>这是第 1 个 li</li>
            <li>这是第 2 个 li</li>
            <li>这是第 3 个 li</li>
            <li>这是第 4 个 li</li>
            <li>这是第 5 个 li</li>
            <li>这是第 6 个 li</li>
            <li>这是第 7 个 li</li>
            <li>这是第 8 个 li</li>
            <li>这是第 9 个 li</li>
        </ul>
    
    </body>
    </html>

> index.js

// 1.使用 es6 导入语法 ，导入jQ
    import $ from 'jquery'
    
    // 2.定义jQ的入口函数
    $(function(){
        
        // 3.实现奇偶行变色效果
        $('li:odd').css('background-color', '#252526');
        $('li:even').css('background-color', '#fdf5e3')
    })

3.测试

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0QUSRSAv-1671884900119)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221213212203910.png)\]][img-0QUSRSAv-1671884900119_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213212203910.png]

> 发现出现错误：SyntaxError（语法错误）
> 
> 原因：浏览器无法适配高级语法
> 
> 解决方法：安装和配置webpack

#### 1.2.安装和配置webpack ####

##### 1.2.1.安装webpack #####

在项目根目录下的终端输入以下命令

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PkzGswW3-1671884900120)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221213212345703.png)\]][img-PkzGswW3-1671884900120_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213212345703.png]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LhaBK1Jq-1671884900121)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221213212506699.png)\]][img-LhaBK1Jq-1671884900121_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213212506699.png]

`注意：`

`-S 是 --save 的简介`

`-D 是 --save-dev的简介`

##### 1.2.2.配置webpack #####

1.在项目根目录下，创建名为webpack.config.js的webpack配置文件，并初始化如下的基本配置

// 使用 node.js 中的导出语法，向外导出一个 webpack 的配置对象
    module.exports = {
        
        // 代表 webpack 运行的模式，可选值有 development 和 production
        mode: 'development'
    }

2.在package.json的scripts节点下，新增dev脚本如下：

`scripts 节点下的脚本，可以通过 npm run 执行，如 npm run dev`

"scripts": {
        
        "dev" : "webpack" 
     },

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PZWXrV0u-1671884900122)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221213214136399.png)\]][img-PZWXrV0u-1671884900122_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213214136399.png]

3.在终端中运行`npm run dev`命令，启动webpack进行项目的打包构建

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HxEURSdP-1671884900123)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221213214311015.png)\]][img-HxEURSdP-1671884900123_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213214311015.png]

> 可以发现，在根目录下多了一个dist目录

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t5Ag8SHA-1671884900123)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221213214425707.png)\]][img-t5Ag8SHA-1671884900123_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213214425707.png]

4.打开src目录下的index.html，引入main.js

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
       
       <script src="../dist/main.js"></script>
    </head>
    <body>
        <ul>
            <li>这是第 1 个 li</li>
            <li>这是第 2 个 li</li>
            <li>这是第 3 个 li</li>
            <li>这是第 4 个 li</li>
            <li>这是第 5 个 li</li>
            <li>这是第 6 个 li</li>
            <li>这是第 7 个 li</li>
            <li>这是第 8 个 li</li>
            <li>这是第 9 个 li</li>
        </ul>
    
    </body>
    </html>

5.测试

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ifJbuvp8-1671884900124)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221213214708864.png)\]][img-ifJbuvp8-1671884900124_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213214708864.png]

##### 1.2.3.了解mode可选值的应用场景 #####

> 压缩的main.js

将 mode的development改为production，最后重新npm run dev

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f8GYxddR-1671884900124)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221213215032074.png)\]][img-f8GYxddR-1671884900124_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213215032074.png]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T7Dpypow-1671884900124)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221213215143298.png)\]][img-T7Dpypow-1671884900124_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213215143298.png]

> 结论：
> 
> 在开发阶段，mode应选择development
> 
> 在上线阶段，mode应选择production

##### 1.2.4.自定义打包的入口和出口 #####

1.在 `webpack.config.js` 配置文件中，通过 `entry` 节点指定`打包的入口`，通过 `output` 节点指定`打包的出口`。

代码示例如下：

// 导入 node.js 中装满操作路径的模块
    const path = require('path')
    
    // 使用 node.js 中的导出语法，向外导出一个 webpack 的配置对象
    module.exports = {
        
        // 代表 webpack 运行的模式，可选值有 development 和 production
        mode: 'development',
    
        // entry : '执行要处理哪个文件'
        // __dirname 表示当前文件所处的目录
        entry : path.join(__dirname,'./src/index1.js'), // 打包入口文件的路径
    
        // 指定生成的文件要存放到哪里
        output : {
        
            // 存放的目录
            path: path.join(__dirname, 'dist'), //输入文件的存放路径
            // 生成的文件名
            filename : 'bundle.js' // 输入文件的名称
        }
    }

2.测试

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uVcOq88m-1671884900125)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221213221238571.png)\]][img-uVcOq88m-1671884900125_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213221238571.png]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-32QDBrpv-1671884900125)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221213221320476.png)\]][img-32QDBrpv-1671884900125_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213221320476.png]

3.修改index.html中的js引入

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
       
       <script src="../dist/bundle.js"></script>
    </head>
    <body>
        <ul>
            <li>这是第 1 个 li</li>
            <li>这是第 2 个 li</li>
            <li>这是第 3 个 li</li>
            <li>这是第 4 个 li</li>
            <li>这是第 5 个 li</li>
            <li>这是第 6 个 li</li>
            <li>这是第 7 个 li</li>
            <li>这是第 8 个 li</li>
            <li>这是第 9 个 li</li>
        </ul>
    
    </body>
    </html>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HSzlCU79-1671884900126)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221213221429127.png)\]][img-HSzlCU79-1671884900126_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213221429127.png]

### 2.插件 ###

#### 2.1.安装和配置webpack-dev-server ####

`作用：实时打包`

##### 2.1.1.安装webpack-dev-server #####

在根目录的终端中运行如下命令：

npm install webpack-dev-server@3.11.2 -D

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-91lQ6q4A-1671884900126)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221214110737015.png)\]][img-91lQ6q4A-1671884900126_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214110737015.png]

##### 2.1.2.配置webpack-dev-server #####

1.修改 `package.json` \-> `scripts` 中的 `dev` 命令如下：

"scripts": {
        
        "dev": "webpack serve" 
      },

`scripts节点下的脚本，可以通过 npm run 执行`

2.再次运行 `npm run dev` 命令，重新进行项目的打包

`这里报以下错误`

`Webpack报错Unable to load ‘@webpack-cli/serve‘ command`

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RwLn2TLe-1671884900126)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221214112730570.png)\]][img-RwLn2TLe-1671884900126_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214112730570.png]

`查看 webpack版本 npx webpack --version，发现 找不到命令`

解决步骤：

1.无法加载 `@webpack cli/service` 命令,未下载 `@webpack cli/service`，则下载 `webpack cli`

（i是 install的简写,-D与 --save-dev的简写，安装包写入 devDependencies (开发环境)中）

2.执行以下命令

npm i --save-dev webpack-cli

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ezQIUuli-1671884900127)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221214113001953.png)\]][img-ezQIUuli-1671884900127_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214113001953.png]

3.再次执行 `npx webpack --version`

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XDpt2qCe-1671884900127)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221214113142089.png)\]][img-XDpt2qCe-1671884900127_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214113142089.png]

`4.查找官方文档发现：`

（1）我使用的是 webpack v5 （ webpack v4 或更高版本），要想webpack从命令行调用，还需要安装 `cli`。

（2)是否使用–save-dev 取决于自己的用例。假设仅将 webpack 用于捆绑，那么建议您使用–save-dev选项安装它，因为不会在生产构建中包含 webpack。否则可以忽略–save-dev。

（3)–save-dev可在前，也可以在最后。

`解决结论：`

要学会看报错代码段，结合官方文档解决问题。

重新执行 `npm run dev`

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f8P4THpw-1671884900127)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221214113343725.png)\]][img-f8P4THpw-1671884900127_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214113343725.png]

3.在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wyAjiUtx-1671884900128)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221214114500919.png)\]][img-wyAjiUtx-1671884900128_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214114500919.png]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-98KKwUGd-1671884900128)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221214114533889.png)\]][img-98KKwUGd-1671884900128_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214114533889.png]

`发现一个问题：修改index1.js中的css样式，发现浏览中并没有生效`

// 1.使用 es6 导入语法 ，导入jQ
    import $ from 'jquery'
    
    // 2.定义jQ的入口函数
    $(function(){
        
        // 3.实现奇偶行变色效果
        $('li:odd').css('background-color', '#fc5531');
        $('li:even').css('background-color', '#91a7d4');
    })

`解决：`

> webpack output is served from /

webpack将生成的bundle.js放于根目录下了（内存中）

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZJ205ThN-1671884900128)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221214114807137.png)\]][img-ZJ205ThN-1671884900128_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214114807137.png]

`删除dist目录,并修改index.html的js引入`

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
       
       
       
       <script src="/bundle.js"></script>
    </head>
    <body>
        <ul>
            <li>这是第 1 个 li</li>
            <li>这是第 2 个 li</li>
            <li>这是第 3 个 li</li>
            <li>这是第 4 个 li</li>
            <li>这是第 5 个 li</li>
            <li>这是第 6 个 li</li>
            <li>这是第 7 个 li</li>
            <li>这是第 8 个 li</li>
            <li>这是第 9 个 li</li>
        </ul>
    
    </body>
    </html>

`测试：`

成功生效

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WxtvHGeM-1671884900129)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221214115421165.png)\]][img-WxtvHGeM-1671884900129_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214115421165.png]

`注意：webpack-dev-server 会启动一个实时打包的 http 服务器`

#### 2.2.安裝和配置html-webpack-plugin ####

`作用：让src目录复制一份放到首页中，一访问 localhost:8080 就会直接跳转到src目录下的index.html页面，并且在复制出来的 index.html 里边注入一个脚本文件 <script src="/bundle.js"></script>`

##### 2.2.1.安装html-webpack-plugin #####

在根目录下运行如下命令，即可在项目中安装此插件：

npm install html-webpack-plugin@5.3.2 -D

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-32WjjVcP-1671884900129)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221214164545489.png)\]][img-32WjjVcP-1671884900129_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214164545489.png]

##### 2.2.2.配置html-webpack-plugin #####

// 1.导入 HTML 插件，得到一个构造函数
    const HtmlPlugin = require('html-webpack-plugin')
    
    // 2.new 构造函数，创建 HTML 插件的实例对象
    const htmlPlugin = new HtmlPlugin({
        
        template : './src/index.html', //指定原文件的存放路径
        filename : './index.html'      //指定生成文件的存放路径
    })
    
    
    // 使用 node.js 中的导出语法，向外导出一个 webpack 的配置对象
    module.exports = {
        
        // 代表 webpack 运行的模式，可选值有 development 和 production
        mode: 'development',
    
        plugins : [htmlPlugin], // 3.通过 plugins 节点，使用 htmlPlugin 插件生效
    
    }

这时候再次访问 http://localhost:8080/

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xliNsVFr-1671884900129)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221214165606986.png)\]][img-xliNsVFr-1671884900129_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214165606986.png]

##### 2.2.3.devServer节点 #####

在 webpack.config.js配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置，示例代码如下：

// 使用 node.js 中的导出语法，向外导出一个 webpack 的配置对象
    module.exports = {
        
        // 代表 webpack 运行的模式，可选值有 development 和 production
        mode: 'development',
    
        plugins: [htmlPlugin], // 通过 plugins 节点，使用 htmlPlugin 插件生效
    
         devServer : {
        
            open : true,        // 初次打包完成后，自动打开浏览器
            host : '127.0.0.1', // 实时打包所使用的主机地址
            port : 8090           // 实时打包所使用的的端口号
        }
    
    }

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1wCgqiTy-1671884900130)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221214171422699.png)\]][img-1wCgqiTy-1671884900130_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214171422699.png]

`注意：凡是修改了 webpack.config.js 配置文件，或者修改了package.json 配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效!`

### 3.loader ###

#### 3.1.loader概述 ####

在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块webpack默认处理不了，`需要调用 loader 加载器才可以正常打包`，否则会报错！

loader 加载器的作用：协助 webpack 打包处理特定的文件模块。例如:

*  css-loader 可以打包处理 .css 相关的文件
 *  less-loader 可以打包处理 .less 相关的文明
 *  babel-loader 可以打包处理 webpack 无法处理的高级 js 语法

在src目录下新建css目录，并在该css目录下新建index.css文件

li{
        
        list-style: none;
    }

在index1.js中导入

// 导入 css 样式(在 webpack 中一切皆模块，都可以通过 es6 导入语法进行导入和使用)
    import './css/index.css'

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fymtYbo1-1671884900130)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221214175829308.png)\]][img-fymtYbo1-1671884900130_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214175829308.png]

实时打包的时候发现错误

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Atcku3Dk-1671884900131)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221214175914445.png)\]][img-Atcku3Dk-1671884900131_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214175914445.png]

#### 3.2.打包处理css文件 ####

1.运行npm i style-loader@3.0.0 css-loader@5.2.6 -D 命令，安装处理 css 文件的 loader

npm i style-loader@3.0.0 css-loader@5.2.6 -D

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8UcSR2kO-1671884900131)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221214180335149.png)\]][img-8UcSR2kO-1671884900131_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214180335149.png]

2.在webpack.config.js的 module -> rules 数组中，添加 loader 规则如下:

module: {
         // 所有第三方文件模块的匹配规则
    	rules: [ // 文件后缀名的匹配规则
    			{
         test: /\.css$/, use: ['style-loader ,'css-loader'] }
           ]
    }

其中，test 表示匹配的文件类型，use 表示对应要调用的 loader  
`注意:`  
`use 数组中指定的 loader 顺序是固定的`

`多个 loader 的调用顺序是:从后往前调用`

测试：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qcSGdQdu-1671884900131)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221214180808273.png)\]][img-qcSGdQdu-1671884900131_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214180808273.png]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gj24sVph-1671884900132)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221214181204514.png)\]][img-Gj24sVph-1671884900132_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214181204514.png]

#### 3.3.打包处理less文件 ####

在css目录下创建index.less文件

html,body,ul{
        margin: 0;
        padding: 0;
        li{
            line-height: 30px;
            padding-left: 20px;
            font-size: 20px;
        }
    }

在index1.js引入index.less文件

// 导入 less 样式(在 webpack 中一切皆模块，都可以通过 es6 导入语法进行导入和使用)
    import './css/index.less'

实时打包时发现错误

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-65wWSGM7-1671884900132)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221214181647134.png)\]][img-65wWSGM7-1671884900132_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214181647134.png]

解決方案：

1.运行npm i less-loader@10.0.1 less@4.1.1 -D 命令

npm i less-loader@10.0.1 less@4.1.1 -D

![1671884900132)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221214182020368.png)\]][1671884900132_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214182020368.png]

2.在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下

module: {
        
            rules :[
                // 处理 .less 文件的 loader
                {
        test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader']}
            ]   
        }

// 使用 node.js 中的导出语法，向外导出一个 webpack 的配置对象
    module.exports = {
        
        // 代表 webpack 运行的模式，可选值有 development 和 production
        mode: 'development',
    
        module: {
        
            rules :[
                // 定义了不用模块对应的 loader
                {
        test: /\.css$/,use: ['style-loader', 'css-loader'] },
                // 处理 .less 文件的 loader
                {
        test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader']}
            ]   
        }
    
    }

测试：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cjs8aAYP-1671884900133)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221214182510762.png)\]][img-cjs8aAYP-1671884900133_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214182510762.png]

#### 3.4.演示图片loader加载的问题 ####

在src目录下新建images目录，并且存放一张名为 logo.png 的图片

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wAVRwtp7-1671884900133)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221214200507413.png)\]][img-wAVRwtp7-1671884900133_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214200507413.png]

index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
       
       
       
       <script src="/bundle.js"></script>
    </head>
    <body>
        <ul>
            <li>这是第 1 个 li</li>
            <li>这是第 2 个 li</li>
            <li>这是第 3 个 li</li>
            <li>这是第 4 个 li</li>
            <li>这是第 5 个 li</li>
            <li>这是第 6 个 li</li>
            <li>这是第 7 个 li</li>
            <li>这是第 8 个 li</li>
            <li>这是第 9 个 li</li>
        </ul>
    
        
        <img src="" alt="" class="box">
    </body>
    </html>

index1.js

// 1.使用 es6 导入语法 ，导入jQ
    import $ from 'jquery'
    
    
    // 导入 css 样式(在 webpack 中一切皆模块，都可以通过 es6 导入语法进行导入和使用)
    import './css/index.css'
    
    // 导入 less 样式(在 webpack 中一切皆模块，都可以通过 es6 导入语法进行导入和使用)
    import './css/index.less'
    
    
    
    // 1.导入图片，得到图片文件
    import logo from './images/1.png'
    // 2.给 img 标签的 src 动态赋值 
    $('.box').attr('src',logo)
    
    
    
    // 2.定义jQ的入口函数
    $(function(){
        
        // 3.实现奇偶行变色效果
        $('li:odd').css('background-color', '#239c2e');
        $('li:even').css('background-color', '#bbb8ce');
    })

发现终端中报错

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1rT3B1zA-1671884900133)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221214200632473.png)\]][img-1rT3B1zA-1671884900133_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214200632473.png]

解决方案如下：

##### 3.4.1.配置加载图片的loader #####

###### 3.4.1.1.打包处理样式表中与url路径相关的文件 ######

1.运行 npm i url-loader@4.1.1 file-loader@6.2.0 -D 命令

npm i url-loader@4.1.1 file-loader@6.2.0 -D

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uh9jsg6c-1671884900134)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221214201103887.png)\]][img-Uh9jsg6c-1671884900134_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214201103887.png]

2.在 webpack.config.js的 module -> rules 数组中，添加 loader 规则如下

module: {
         // 所有第三方文件模块的匹配规则
    	rules: [ // 文件后缀名的匹配规则
        	  // 处理图片文件的 loader
               // 如果需要调用的 loader 只有一个，则只传递一个字符串也行，若有多个则必须指定数组
                {
        test: /\.jpg|png|gif$/,use:'url-loader'}
         ]
    }

`其中 ? 之后的是 loader 的参数项:`

*  limit 用来指定图片的大小，单位是字节 (byte)
 *  只有≤limit 大小的图片，才会被转为 base64 格式的图片

重新运行 npm run dev

测试：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r3TTk6ze-1671884900134)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221214201625928.png)\]][img-r3TTk6ze-1671884900134_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214201625928.png]

#### 3.5.打包处理js文件中的高级语法 ####

webpack 只能打包处理`一部分`高级的 Javascript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借助于 `babel-loader` 进行打包处理。例如 webpack 无法处理下面的 JavaScript 代码:

// 1.定义了名为 info 的装饰器
    function info(target) {
        
        // 2.为目标添加静态属性  info
        target.info = 'Person info
    }
    
    // 3.为 Person 类应用 info 装饰器
    @info
    class Person{
        }
    
    // 4.打印 Person 的静态属性 info
    console.log(Person.info)

##### 3.5.1.安装babel-loader相关的包 #####

运行如下的命令安装对应的依赖包:

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pL5K1EDS-1671884900135)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221214203011677.png)\]][img-pL5K1EDS-1671884900135_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214203011677.png]

在 webpack.config.js的 module -> rules 数组中，添加 loader 规则如下:

// 注意:必须使用 exclude 指定排除项，因为 node_modules 目录下的第三方包不需要被打包
    // 使用babel-loader 处理高级的 js 语法
    // 在配置 babel-loader 的时候，程序员只需要把自己的代码进行转换即可，一定要排除 node_modules 目录中的 js 文件
    // 因为第三方包中的 js 文件的兼容性，不需要程序关心
    {
        test: /\.js$/,use: 'babel-loader', exclude: /node_modules/}

##### 3.5.2.配置babel-loader #####

在项目根目录下，创建名为 `babel.config.js` 的配置文件，`定义 Babel 的配置项`如下:

module.exports = {
        
            // 声明 babel可用的插件
            // 将来加载 webpack 在调用 babel-loader 的时候，会先加载 plugins 插件来使用
            plugins: [['@babel/plugin-proposal-decorators', {
        legacy: true}]]
    }

### 4.发布 ###

#### 4.1.配置build命令 ####

##### 4.1.1.配置webpack的打包发布 #####

在 package.json 文件的 scripts 节点下，新增 build 命令如下：

"scripts": {
        
        "dev": "webpack serve",
        "build" : "webpack --mode production"  // 项目发布时 ，运行 build 命令 
      },

`--mode`是一个参数项，用来指定 webpack 的`运行模式`。production 代表生产环境，会对打包生成的文件进行`代码压缩`和`性能优化`。

`注意:通过--mode指定的参数项，会覆盖 webpack.config.js 中的mode选项`

执行 npm run build

#### 4.2.优化图片和js文件的存放路径 ####

// 指定生成的文件要存放到哪里
        output : {
        
            // 存放的目录
            path: path.join(__dirname, 'dist'), //输入文件的存放路径
            // 生成的文件名
            filename : 'js/bundle.js' // 输入文件的名称
        },
    
        module: {
        
            rules :[
                // 定义了不用模块对应的 loader
    
                // 处理图片文件的 loader
                // 如果需要调用的 loader 只有一个，则只传递一个字符串也行，若有多个则必须指定数组
                // 在配置 url-loader 的时候，多个参数之间，使用 $ 符合进行分隔
                {
        test: /\.jpg|png|gif$/,use:'url-loader?limit=20000&outputPath=images'},
    
            ]   
        }
    
    }

#### 4.3.配置和使用clean-webpack-plugin插件自动删除dist目录 ####

##### 4.3.1.自动清理dist目录下的旧文件 #####

为了在每次打包发布时`自动清理掉 dist 目录中的旧文件`，可以安装并配置 `clean-webpack-plugin` 插件:

教程地址:https://www.npmjs.com/package/clean-webpack-plugin

1.在根目录下执行以下命令

npm install --save-dev clean-webpack-plugin

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kx3lDV3m-1671884900135)(C:\\Users\\30666\\AppData\\Roaming\\Typora\\typora-user-images\\image-20221215172512748.png)\]][img-Kx3lDV3m-1671884900135_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221215172512748.png]

2.在 webpack.config.js 写入以下函数

const {
        CleanWebpackPlugin} = require('clean-webpack-plugin');
    
    // 使用 node.js 中的导出语法，向外导出一个 webpack 的配置对象
    module.exports = {
        
        // 代表 webpack 运行的模式，可选值有 development 和 production
        mode: 'development',
        
        plugins: [htmlPlugin, new CleanWebpackPlugin()], // 通过 plugins 节点，使用 htmlPlugin 插件生效
    
    }

`执行 npm run build 测试`

### 5.Source Map ###

#### 5.1.概述 ####

Source Map 就是一个`信息文件`，里面`储存着位置信息`。也就是说，Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。

有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

#### 5.2.默认Source Map的问题 ####

开发环境下默认生成的Source Map,记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行  
数不一致的问题。

#### 5.3.解决默认Source Map的问题 ####

开发环境下，推荐在保持一致:webpack.config.js 中添加如下的配置，即可保证运行时报错的行数与源代码的行数

// 使用 node.js 中的导出语法，向外导出一个 webpack 的配置对象
    module.exports = {
        
    
        // 在开发调用阶段，建议都把 devtool 的值设置为 eval-source-map
        devtool : 'eval-source-map',
    
        // 代表 webpack 运行的模式，可选值有 development 和 production
        mode: 'development',
    
    }

`注意：在发布项目的时候出于安全性考虑建议关闭SourceMap`

#### 5.4.只定位行不暴露源码 ####

在生产环境下,如果只想定位报错的具体行数，且不想暴露源码。此时可以将 devtool 的值设置为

nosources-source-map

// 使用 node.js 中的导出语法，向外导出一个 webpack 的配置对象
    module.exports = {
        
    
        // 在开发调用阶段，建议都把 devtool 的值设置为 eval-source-map
        // 在实际发布的时候，建议把 devtool 的值设置为 nosources-source-map
        devtool : 'nosources-source-map',
    
        // 代表 webpack 运行的模式，可选值有 development 和 production
        mode: 'development',
    
    }

#### 5.5.Source Map的最佳实践 ####

1.开发环境下:

*  建议把 devtbol的值设置为 eval-source-map
 *  好处:可以精准定位到具体的错误行

2.生产环境下:

*  建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map
 *  好处:防止源码泄露，提高网站的安全性

### 6.webpack中 @ 的原理和好处 ###

在src目录下新建msg.js文件

export default {
        
        msg : 'hello Vue.'
    }

在src目录下新建js/test目录，并在test目录下新建info.js

import msg from '../../msg'
    
    console.log(msg);

在index1.js中

// 导入 src/js/test/info.js
    import info from './js/test/info.js'

`执行 npm run dev 测试`

`配置 @`

webpack.config.js

module.exports = {
        
        
        resolve : {
        
            alias : {
        
                // 告诉 webpack ，程序员写的代码中，@ 符号表示 src 这一层目录   
                '@' : path.join(__dirname,'./src/')
            }
        }
    
    }

info.js中

// import msg from '../../msg'
    
    
    // 建议使用 @ 符号表示 src 源代码目录，从外往里查找；不要使用 ../ 从里往外查找
    // @/msg.js
    import msg from '@/msg.js'
    
    console.log(msg);

index1.js

// 导入 src/js/test/info.js
    import info from './js/test/info.js'
     
    // 1.使用 es6 导入语法 ，导入jQ
    import $ from 'jquery'
    
    
    // 导入 css 样式(在 webpack 中一切皆模块，都可以通过 es6 导入语法进行导入和使用)
    //import './css/index.css'
    import '@/css/index.css'
    
    // 导入 less 样式(在 webpack 中一切皆模块，都可以通过 es6 导入语法进行导入和使用)
    //import './css/index.less'
    import '@/css/index.less'
    
    
    // 1.导入图片，得到图片文件
    //import logo from './images/logo.png'
    import logo from '@/images/logo.png'
    // 2.给 img 标签的 src 动态赋值 
    $('.box').attr('src',logo)
    
    
    
    // 2.定义jQ的入口函数
    $(function(){
        
        // 3.实现奇偶行变色效果
        $('li:odd').css('background-color', '#239c2e');
        $('li:even').css('background-color', '#bbb8ce');
    })

导入 src/js/test/info.js  
import info from ‘./js/test/info.js’

``执行 npm run dev 测试``
    
    
    
    
    
    
    
    ``配置 @ ``
    
    webpack.config.js
    
    ```js
    module.exports = {
        
        resolve : {
            alias : {
                // 告诉 webpack ，程序员写的代码中，@ 符号表示 src 这一层目录   
                '@' : path.join(__dirname,'./src/')
            }
        }
    
    }

info.js中

index1.js

[Link 1]: https://www.bilibili.com/video/BV1zq4y1p7ga
[img-VHokc8oQ-1671884900117_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213211950758.png]: https://img-blog.csdnimg.cn/85e2c12e19464f0ab9fa586aee849d2e.png
[img-8XDiW7pt-1671884900119_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213212136135.png]: https://img-blog.csdnimg.cn/adb825a3eba84047b50a14e4229f34b2.png
[img-0QUSRSAv-1671884900119_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213212203910.png]: https://img-blog.csdnimg.cn/755087905c2042bb810caf96338e9ebf.png
[img-PkzGswW3-1671884900120_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213212345703.png]: https://img-blog.csdnimg.cn/7c276e0360f44fa9be08e84832bac81b.png
[img-LhaBK1Jq-1671884900121_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213212506699.png]: https://img-blog.csdnimg.cn/5fa14f11807240fb928111d8814cff43.png
[img-PZWXrV0u-1671884900122_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213214136399.png]: https://img-blog.csdnimg.cn/47f03be78bd14431a71ffca266e09fa5.png
[img-HxEURSdP-1671884900123_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213214311015.png]: https://img-blog.csdnimg.cn/d46b3cb5218e48cc9988c983d7c9ec68.png
[img-t5Ag8SHA-1671884900123_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213214425707.png]: https://img-blog.csdnimg.cn/ce70854601224b14b07e9afe89991ae5.png
[img-ifJbuvp8-1671884900124_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213214708864.png]: https://img-blog.csdnimg.cn/3a279f309a894cb88d886a72eccfed1d.png
[img-f8GYxddR-1671884900124_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213215032074.png]: https://img-blog.csdnimg.cn/6eaca40ae7684d00bd0fd808bfe54dfa.png
[img-T7Dpypow-1671884900124_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213215143298.png]: https://img-blog.csdnimg.cn/ff7e932c521a48bab960a6b3d31cfa4c.png
[img-uVcOq88m-1671884900125_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213221238571.png]: https://img-blog.csdnimg.cn/d52981367c344f6aa87d91154dc3a5fc.png
[img-32QDBrpv-1671884900125_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213221320476.png]: https://img-blog.csdnimg.cn/ac7f9ca3679743868e341e2b701642d2.png
[img-HSzlCU79-1671884900126_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221213221429127.png]: https://img-blog.csdnimg.cn/595c5bfa9a85414a95ca9407dff16c3d.png
[img-91lQ6q4A-1671884900126_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214110737015.png]: https://img-blog.csdnimg.cn/a0ec500937ae4165bcaeb8ce001c72dd.png
[img-RwLn2TLe-1671884900126_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214112730570.png]: https://img-blog.csdnimg.cn/68eb5d461b244ac29f49023d85784924.png
[img-ezQIUuli-1671884900127_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214113001953.png]: https://img-blog.csdnimg.cn/d44c9e96542a45789b1318ecb548abfd.png
[img-XDpt2qCe-1671884900127_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214113142089.png]: https://img-blog.csdnimg.cn/a843abe49d314be59b711bcc027d922d.png
[img-f8P4THpw-1671884900127_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214113343725.png]: https://img-blog.csdnimg.cn/d1f451ed12a946d9b76f18ae42198003.png
[img-wyAjiUtx-1671884900128_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214114500919.png]: https://img-blog.csdnimg.cn/b925f64149e64fda9dc4095fbafa3681.png
[img-98KKwUGd-1671884900128_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214114533889.png]: https://img-blog.csdnimg.cn/c62282c2cfd44bb88b9b9aa135cc6d6b.png
[img-ZJ205ThN-1671884900128_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214114807137.png]: https://img-blog.csdnimg.cn/95b214139abd47ea93f0f988ffce144f.png
[img-WxtvHGeM-1671884900129_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214115421165.png]: https://img-blog.csdnimg.cn/6061036498aa4a29976d63cd1ae5845c.png
[img-32WjjVcP-1671884900129_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214164545489.png]: https://img-blog.csdnimg.cn/940c0cb984c145768f73739e46072b52.png
[img-xliNsVFr-1671884900129_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214165606986.png]: https://img-blog.csdnimg.cn/a7fbc794fd884eb9b2cea0a26486e420.png
[img-1wCgqiTy-1671884900130_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214171422699.png]: https://img-blog.csdnimg.cn/be441f635ab548439ab8b30d60db50dd.png
[img-fymtYbo1-1671884900130_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214175829308.png]: https://img-blog.csdnimg.cn/539178c82ce14c9980e64dd16a015055.png
[img-Atcku3Dk-1671884900131_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214175914445.png]: https://img-blog.csdnimg.cn/4b07660046a942e9b4c8384abdf39ac3.png
[img-8UcSR2kO-1671884900131_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214180335149.png]: https://img-blog.csdnimg.cn/41a53c38656b431fa803e1fb3c0895e9.png
[img-qcSGdQdu-1671884900131_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214180808273.png]: https://img-blog.csdnimg.cn/96d29684b36140b89272d0ca882e71c7.png
[img-Gj24sVph-1671884900132_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214181204514.png]: https://img-blog.csdnimg.cn/13099b2b73664fbdb9d0794867eefa03.png
[img-65wWSGM7-1671884900132_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214181647134.png]: https://img-blog.csdnimg.cn/cdae612f49dc4cc791940c6941c71d8d.png
[1671884900132_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214182020368.png]: https://img-blog.csdnimg.cn/9b27ee398a0e4ff9bb5b183bbef414c2.png
[img-cjs8aAYP-1671884900133_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214182510762.png]: https://img-blog.csdnimg.cn/0cbf49ff085a4bc5822882a451d05f46.png
[img-wAVRwtp7-1671884900133_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214200507413.png]: https://img-blog.csdnimg.cn/758cb1ea5e724abdac72bd80ca531277.png
[img-1rT3B1zA-1671884900133_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214200632473.png]: https://img-blog.csdnimg.cn/bc84cb8caf554a8e9614f7253c40f363.png
[img-Uh9jsg6c-1671884900134_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214201103887.png]: https://img-blog.csdnimg.cn/726ee781cf514eeba9f72a1bf3865ad0.png
[img-r3TTk6ze-1671884900134_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214201625928.png]: https://img-blog.csdnimg.cn/f54d337d797445cb9761a87c8f480b91.png
[img-pL5K1EDS-1671884900135_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221214203011677.png]: https://img-blog.csdnimg.cn/299370f9664144b789323356477957a4.png
[img-Kx3lDV3m-1671884900135_C_Users_30666_AppData_Roaming_Typora_typora-user-images_image-20221215172512748.png]: https://img-blog.csdnimg.cn/518ed1febaf5422daaa14aecc4e9023c.png