Webpack+Git复习总结

Webpack模块打包工具

初始

Webpack 是一个静态模块打包工具,从入口构建依赖图，打包有关模块

1.静态模块：编写代码过程中的，html，css， js，图片等固定内容的文件
在这里插入图片描述

2.作用：把静态模块内容，压缩，这个和，转译等（前端工程化）

3.体验Webpack 打包 2 个 JS 文件内容

具体步骤：

1. 新建项目文件夹 Webpack_study，初始化包环境，得到 package.json 文件

   npm init -y
   

2. 新建 src 源代码文件夹（书写代码）包括 utils/check.js 封装用户名和密码长度函数，引入到 src/index.js 进行使用

   src/utils/check.js

   // 封装校验手机号长度和校验验证码长度的函数
   export const checkPhone = phone => phone.length === 11
   export const checkCode = code => code.length === 6
   

   src/index.js

   /**
    * 目标1：体验 webpack 打包过程
    */
   // 1.1 准备项目和源代码
   import { checkPhone, checkCode } from '../utils/check.js'
   console.log(checkPhone('13900002020'))
   console.log(checkCode('123123123123'))
   // 1.2 准备 webpack 打包的环境
   // 1.3 运行自定义命令打包观察效果（npm run 自定义命令）
   

3. 下载 webpack webpack-cli 到项目（版本独立）

npm i webpack webpack-cli --save-dev --legacy-peer-deps

4.项目中运行工具命令，采用自定义命令的方式（局部命令）

npm run 自定义命令

5.自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码）

​ 默认入口 默认出口

Webpack 修改入口和出口

操作步骤：

1. 项目根目录，新建 Webpack.config.js 配置文件
2. 导出配置对象，配置入口，出口文件路径（别忘了修改磁盘文件夹和文件的名字）

Webpack.config.js

const path = require('path')

module.exports = {
  //入口
  entry: path.resolve(__dirname, 'src/login/index.js'),
  //出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './login/index.js'  
    //在生成打包后的内容之前，清空目录
    clean: true
  }
}

3.重新打包观察

Webpack 自动生成 html 文件

1.下载 html-webpack-plugin 本地软件包到项目中

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

2.配置 webpack.config.js 让 Webpack 拥有插件功能

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

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public/login.html'),// 模板文件
      filename: path.resolve(__dirname, 'login/index.html') // 输出文件
    })
  ]
}

3.指定以 public/login.html 为模板复制到 dist/login/index.html，并自动引入其他打包后资源

4.运行打包命令，观察打包后 dist 文件夹下内容并运行查看效果

Webpack-打包 css 代码

注意：Webpack 默认只识别 JS 和 JSON 文件内容，所以想要让 Webpack 识别更多不同内容，需要使用加载器

优点：css 文件可以被浏览器缓存，减少 JS 文件体积，让浏览器并行下载 css 和 js 文件

需要 2 个加载器来辅助 Webpack 才能打包 css 代码

加载器 css-loader：解析 css 代码

加载器 style-loader：把解析后的 css 代码插入到 DOM（style 标签之间）

步骤：

1.准备 css 文件引入到 src/login/index.js 中（压缩转译处理等）

//这里只需要引入代码内容让 Webpack 处理，不需定义变量接收在JS代码中继续使用

/**
 * 目标5：打包 css 代码
 *  5.1 准备 css 代码，并引入到 js 中
 *  5.2 下载 css-loader 和 style-loader 本地软件包
 *  5.3 配置 webpack.config.js 让 Webpack 拥有该加载器功能
 *  5.4 打包后观察效果
 */
// 5.1 准备 css 代码，并引入到 js 中
import 'bootstrap/dist/css/bootstrap.min.css'
import './index.css'

2.下载 css-loader 和 style-loader 本地软件包

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

3.配置 webpack.config.js 让 Webpack 拥有该加载器功能

// ...

module.exports = {
  // ...
  module: { // 加载器
    rules: [ // 规则列表
      {
        test: /\.css$/i, // 匹配 .css 结尾的文件
        use: ['style-loader', 'css-loader'], // 使用从后到前的加载器来解析 css 代码和插入到 DOM
      }
    ]
  }
};

4.打包后运行 dist/login/index.html 观察效果，看看准备好的样式是否作用在网页上

Webpack-打包 less 代码

加载器 less-loader：把 less 代码编译为 css 代码，还需要依赖 less 软件包

步骤：

1.新建 login/index.less 文件，设置背景图样式（图片在配套资料-素材文件夹中

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

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

/**
 * 目标8：打包 less 代码
 *  8.1 新建 less 代码（设置背景图）并引入到 src/login/index.js 中
 *  8.2 下载 less 和 less-loader 本地软件包
 *  8.3 配置 webpack.config.js 让 Webpack 拥有功能
 *  8.4 打包后观察效果
 */
// 8.1 新建 less 代码（设置背景图）并引入到 src/login/index.js 中
import './index.less'

3.下载 less 和 less-loader 本地软件包

npm i less less-loader --save-dev

4.配置 webpack.config.js 让 Webpack 拥有功能

// ...

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.less$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]
      }
    ]
  }
}

5.打包后运行 观察效果

Webpack-打包图片

资源模块：Webpack 内置了资源模块的打包，无需下载额外 loader

步骤：

1.配置 webpack.config.js 让 Webpack 拥有打包图片功能

• 占位符 【hash】对模块内容做算法计算，得到映射的数字字母组合的字符串
• 占位符 【ext】使用当前模块原本的占位符，例如：.png / .jpg 等字符串
• 占位符 【query】保留引入文件时代码中查询参数（只有 URL 下生效）

2.注意：判断临界值默认为 8KB

• 大于 8KB 文件：发送一个单独的文件并导出 URL 地址
• 小于 8KB 文件：导出一个 data URI（base64字符串）

3.在 src/login/index.js 中给 img 标签添加 logo 图片

/**
 * 目标9：打包资源模块（图片处理）
 *  9.1 创建 img 标签并动态添加到页面，配置 webpack.config.js
 *  9.2 打包后观察效果和区别
 */
// 9.1 创建 img 标签并动态添加到页面，配置 webpack.config.js
// 注意：js 中引入本地图片资源要用 import 方式（如果是网络图片http地址，字符串可以直接写）
import imgObj from './assets/logo.png'
const theImg = document.createElement('img')
theImg.src = imgObj
document.querySelector('.login-wrap').appendChild(theImg)

4.配置 webpack.config.js 让 Webpack 拥有打包图片功能

// ...

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset',
        generator: {
          filename: 'assets/[hash][ext][query]'
        }
      }
    ]
  }
}

5.打包后运行观察效果

Webpack 搭建开发环境

注意：每次改动代码，都需重新打包，十分麻烦→给项目集成 webpack-dev-server 开发服务器

作用：启动 Web 服务，打包输出源码在内存，并会自动检测代码变化热更新到网页

步骤：

1.下载 webpack-dev-server 软件包到当前项目

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

2.配置自定义命令，并设置打包的模式为开发模式

// ...

module.exports = {
  // ...
  //设置打包的模式（开发模式）
  mode: 'development'
}

"scripts": {
  // ...
  //因为它和build一样，是自定义命令
  "dev": "webpack serve --mode=development"
},

3.使用 npm run dev 来启动开发服务器，访问提示的域名+端口号，在浏览器访问打包后的项目网页，修改代码后试试热更新效果

注意：在 js / css 文件中修改代码保存后，会实时反馈到浏览器

webpack-dev-server 作用：

启动 Webpack 开发服务器，会启动一个 Web 服务，实时检测代码变化重新打包，并快速反应最新效果到浏览器页面上

Webpack 打包模式

1.打包模式：告知 Webpack 使用相应模式的内置优化

2.分类：

3.设置影响 Webpack

方式1：在 webpack.config.js 配置文件设置 mode 选项

// ...

module.exports = {
  // ...
  mode: 'production'
}

方式2：在 package.json 命令行设置 mode 参数

"scripts": {
  "build": "webpack --mode=production",
  "dev": "webpack serve --mode=development"
},

4.注意：命令行设置的优先级高于配置文件中的，推荐用命令行设置

5.体验：在 build 命令后 修改 mode 的值，打包输出观察打包后的 js 文件内容

6.两种模式区别：

开发模式注重代码热替换更快，让开发调试代码更便捷，生产模式注重项目体积更小，更轻量，适配不同的浏览器环境

Webpack 打包模式的应用

1.需求：在开发模式下用 style-loader 内嵌更快，在生产模式下提取 css 代码

方案1：webpack.config.js 配置导出函数，但是局限性大（只接受 2 种模式）

方案2：借助 cross-env （跨平台通用）包命令，设置参数区分环境

方案3：配置不同的 webpack.config.js （适用多种模式差异性较大情况）

使用方案2进行尝试

步骤：

1.下载 cross-env 软件包到当前项目

npm i cross-env --save-dev

2.配置自定义命令，传入参数名和值（会绑定到 process.env 对象下）

3.在 webpack.config.js 区分不同环境使用不同配置

   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',
           ],
         }
       ],
     },

4.重新打包观察两种配置区别

Webpack 前端注入环境变量

前端项目中，开发模式下打印语句生效，生产模式下打印语句失效

问题：cross-env 设置的只在 Node.js 环境生效，前端代码无法访问 process.env.NODE_ENV

解决方法：使用 Webpack 内置的 DefinePlugin 插件

作用：在编译时，将前端代码中匹配的变量名，替换为值或表达式

配置 webpack.config.js 中给前端注入环境变量

// ...
const webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      // key 是注入到打包后的前端 JS 代码中作为全局变量
      // value 是变量对应的值（在 corss-env 注入在 node.js 中的环境变量字符串）
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ]
}

Webpack 开发环境调错 source map

在开发环境如何精准定位到报错源码位置

source map：可以准确追踪 error 和 warning 在原始代码的位置

存在问题：代码被压缩和混淆，无法正确定位源代码位置

设置：webpack.config.js 配置 devtool 选项

// ...

module.exports = {
  // ...
  devtool: 'inline-source-map'
}

inline-source-map 选项：把源码的位置信息一起打包在 JS 文件内

注意：source map 适用于开发环境，不要在生产环境使用（防止被轻易查看源码位置）

Webpack 设置解析别名路径

作用：设置 Webpack 如何设置路径别名，方便我们引入目标模块

步骤：

1.原来路径如下：

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

2.配置解析别名：在 webpack.config.js 中设置

// ...

const config = {
  // ...
  resolve: {
    alias: {
      //@：看在 webpack 配置中的别名路径是什么，就会在打包时替换成哪个路径使用
      '@': path.resolve(__dirname, 'src')
    }
  }
}

3.这样我们以后，引入目标模块写的路径就更简单了

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

4.修改代码的路径后，重新打包观察效果是否正常！

优化-CDN使用

开发模式使用本地第三方库，生产模式下使用 CDN 加载引入

需求：开发模式使用本地第三方库，生产模式下使用 CDN 加载引入

CDN定义：内容分发网络，指的是一组分布在各个地区的服务器

作用：把静态资源文件/第三方库放在 CDN 网络中各个服务器中，供用户就近请求获取

优点：减轻自己服务器请求压力，就近请求物理延迟低，配套缓存策略

实现需求思路图：

步骤：

1.在 html 中引入第三方库的 CDN 地址 并用模板语法判断

<% if(htmlWebpackPlugin.options.useCdn){ %>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
<% } %>

2.配置 webpack.config.js 中 externals 外部扩展选项（防止某些 import 的包被打包）

   // 生产环境下使用相关配置
   if (process.env.NODE_ENV === 'production') {
     // 外部扩展（让 webpack 防止 import 的包被打包进来）
     config.externals = {
       // key：import from 语句后面的字符串
       // value：留在原地的全局变量（最好和 cdn 在全局暴露的变量一致）
       'bootstrap/dist/css/bootstrap.min.css': 'bootstrap',
       'axios': 'axios'
     }
   }

   // ...
   const config = {
     // ...
     plugins: [
       new HtmlWebpackPlugin({
         // ...
         // 自定义属性，在 html 模板中 <%=htmlWebpackPlugin.options.useCdn%> 访问使用
         useCdn: process.env.NODE_ENV === 'production'
       })
     ]
   }

3.两种模式下打包观察效果

Webpack 多页面打包

让 Webpack 同时打包登录和内容列表页面

概念：

• 单页面：单个 html 文件，切换 DOM 的方式实现不同业务逻辑展示
• 多页面：多个 html 文件，切换页面实现不同业务逻辑展示

需求：将数据管理平台-内容页面一起引入打包使用

步骤：

1. 准备源码（html，css，js）放入相应位置，并改用模块化语法导出
2. 下载 form-serialize 包并导入到核心代码中使用
3. 配置 webpack.config.js 多入口和多页面的设置

// ...
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']
    })
  ]
}

4.重新打包观察效果

优化-分割公共代码

需求：把 2 个以上页面引用的公共代码提取

步骤：

1.配置 webpack.config.js 的 splitChunks 分割功能

// ...
const config = {
  // ...
  optimization: {
    // ...
    splitChunks: {
      chunks: 'all', // 所有模块动态非动态移入的都分割分析
      cacheGroups: { // 分隔组
        commons: { // 抽取公共模块
          minSize: 0, // 抽取的chunk最小大小字节
          minChunks: 2, // 最小引用数
          reuseExistingChunk: true, // 当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用
          name(module, chunks, cacheGroupKey) { // 分离出模块文件名
            const allChunksNames = chunks.map((item) => item.name).join('~') // 模块名1~模块名2
            return `./js/${allChunksNames}` // 输出到 dist 目录下位置
          }
        }
      }
    }
      
 

2.打包观察效果

GIT

初识

概念：一个免费开源，分布式的代码版本控制系统，帮助开发团队维护代码

作用：记录代码内容，切换代码版本，多人开发时高效合并代码内容

Git安装：

1）登录成功后，进行检验

打开bash 终端（git 专用）

命令：git -v（查看版本号）

2）配置：用户名和邮箱，应用在每次提交代码版本时表明自己身份

git config --global user.name “你的用户名”
git config --global user.email “你的邮箱”

GIT仓库

记录文件状态内容的地方，存储着修改的历史记录

创建Git仓库的两种方式：

1)将本地文件夹转换成Git仓库：命令git init

2)从其他服务器上克隆 Git 仓库

Git 三个区域(工作区、暂存区、版本库)

Git 文件状态

1.两种状态：

未跟踪：新文件，从未被 Git 管理过

已跟踪（新添加，未修改，已修改）：Git 已经知道和管理的文件

2.查看暂存区和工作区文件状态：

 git status -s

Git 暂存区作用

暂时存储，可以临时恢复代码内容

暂存区 -> 覆盖 -> 工作区，命令：git restore 目标文件（注意：完全确认覆盖时使用）

从暂存区移除文件，命令：git rm --cached 目标文件

Git-切换版本

把版本库某个版本对应的内容快照，恢复到工作区/暂存区

查看提交历史：git log --oneline

Git回退命令：

git reset --soft 版本号（其他文件未跟踪）

git reset --hard 版本号

git reset --mixed 版本号 （与 git reset 等价）

注意1：只有记录在版本库的提交记录才能恢复

注意2：回退后，继续修改->暂存->提交操作即可（产生新的提交记录过程）

忽略文件

.gitignore 文件可以让 git 彻底忽略跟踪指定文件

创建：

1.项目根目录新建 .gitignore 文件

2.填入相应配置来忽略指定文件

注意：如果文件已经被暂存区跟踪过，可以从暂存区移除即可

分支

本质上是指向提交节点的可变指针，默认名字是 master

注意：HEAD 指针影响工作区/暂存区的代码状态

创建新分支：git branch分支名

切换新分支：git checkout分支名

Git 常用命令

命令	作用	注意
git -v	查看 git 版本
git init	初始化 git 仓库
git add 文件标识	暂存某个文件	文件标识以终端为起始的相对路径
git add .	暂存所有文件
git commit -m ‘说明注释’	提交产生版本记录	每次提交，把暂存区内容快照一份
git status	查看文件状态 - 详细信息
git status -s	查看文件状态 - 简略信息	第一列是暂存区状态，第二列是工作区状态
git ls-files	查看暂存区文件列表
git restore 文件标识	从暂存区恢复到工作区	如果文件标识为 . 则恢复所有文件
git rm --cached 文件标识	从暂存区移除文件	不让 git 跟踪文件变化
git log	查看提交记录 - 详细信息
git log --oneline	查看提交记录 - 简略信息	版本号 分支指针 提交时说明注释

命令	作用	注意
git reflog --oneline	查看完整历史 - 简略消息	包括提交，切换，回退等所有记录
git reset 版本号	切换版本代码到暂存区和工作区	–soft 模式保留暂存区和工作区原本内容 --hard 模式不保留暂存区和工作区原本内容 --mixed 模式不保留暂存区，工作区保留（默认） 先覆盖到暂存区，再用暂存区对比覆盖工作区
git branch 分支名	创建分支
git branch	查看本地分支
git branch -d 分支名	删除分支	请确保记录已经合并到别的分支下，再删除分支
git checkout 分支名	切换分支
git checkout -b 分支名	创建并立刻切换分支
git merge 分支名	把分支提交历史记录合并到当前所在分支

Git 远程仓库

概念：托管在因特网或其他网络中的你的项目的版本库

作用：保存版本库的历史记录，多人协作

创建：公司自己服务器 / 第三方托管平台（Gitee，GitLab，GitHub…）

需求：创建远程版本库，并把本地 Git 仓库推送上去保存

步骤：

1.注册第三方托管平台网站账号

2.新建仓库得到远程仓库 Git 地址

3.本地 Git 仓库添加远程仓库原点地址

命令：git remote add 远程仓库别名 远程仓库地址

例如：git remote add origin https://gitee.com/lidongxu/work.git

4.本地 Git 仓库推送版本记录到远程仓库

命令：git push -u 远程仓库别名 本地和远程分支名

例如：git push -u origin master

完整写法：git push --set-upstream origin master:master

Git 远程仓库 - 克隆

克隆：拷贝一个 Git 仓库到本地，进行使用

命令：git clone 远程仓库地址，例如：git clone https://gitee.com/lidongxu/work.git

效果：在运行命令所在文件夹，生成 work 项目文件夹（包含版本库，并映射到暂存区和工作区）

注意1：Git 本地仓库已经建立好和远程仓库的链接

注意2：仓库公开随意克隆，推送需要身为仓库团队成员

多人协同开发

需求：小传新代码共享给小智

步骤：

1.小传开发代码 -> 工作区 -> 暂存区 -> 提交 -> 拉取（可选）-> 推送

2.小智 -> 拉取（后续也可以开发代码 -> … -> 推送）

3.想要看到别人同步上去的最新内容：git pull origin master 等价于

git fetch origin master:master（获取远程分支记录到本地，未合并）

git merge origin/master (把远程分支记录合并到所在分支下）

VSCode 中使用 Git

使用：源代码管理，进行暂存，撤销，对比差异，提交等操作

注意：VSCode 打开的项目文件夹下需要有 .git 仓库

Git常用用命令

命令	作用	注意
git remote add 远程仓库别名 远程仓库地址	添加远程仓库地址	别名唯一，地址是 .git 结尾的网址
git remote -v	查看远程仓库地址
git remote remove 远程仓库别名	删除远程仓库地址
git pull 远程仓库别名 分支名	拉取	完整写法：git pull 远程仓库别名 远程分支名:本地分支名 等价于：git fetch 和 git merge
git push 远程仓库别名 分支名	推送	完整写法：git push 远程仓库别名 本地分支名:远程分支名 -u：建立通道后以后可以简写 git push
git pull --rebase 远程仓库别名 分支名	拉取合并	合并没有关系的记录
git clone 远程仓库地址	克隆	从0得到一个远程的Git仓库到本地使用