（四）Webpack和打包过程

• • npx命令的作用
  • pnpm原理(软硬连接)和用法
  • webpack的定义和理解
  • loader的作用
  • babel的作用

一、node内置模块

1.内置模块path

2.常用api

3.在webpack中的使用：用绝对路径的时候用path.resolve()

二、webpack

1.认识webpack

2.脚手架依赖webpack

3.webpack是什么！！！

-   输入资源:
    -   各种源文件（.js/.ts/.sass/.png等）
    -   支持任意类型的开发资源

-   处理过程:
    -   通过webpack核心进行转换
    -   自动分析模块依赖关系

-   输出结果:
    -   生成静态资源包（static assets）
    -   包含优化后的JS/CSS/图片等
    

4.vue项目加载的文件有哪些

5.安装

6、webpack的基本打包

• 默认打包：默认打包src/index.js到dist/main.js
• 配置方式：通过webpack.config.js文件配置入口和出口
• 路径要求：output.path必须使用绝对路径
• 命令简化：将webpack命令写入package.json的scripts中

7、webpack依赖图-webpack如何对项目进行打包

• 形成机制:

  • 入口文件（如main.js）依赖其他文件（如utils/math.js）
  • 依赖文件可能继续依赖更多文件，形成图结构而非简单的树结构
  • 即使未在webpack.config.js中显式配置，依赖文件也会被打包
  • 包含应用程序所需的所有静态资源模块
  • 最终会生成可部署的静态资源文件

5.webpack打包各种资源-loader-插件

loader的配置与使用

• • 配置位置：在webpack.config.js文件的module.rules数组中进行配置
  • 规则结构：每个loader配置包含test(匹配规则)和use(使用的loader)
  • 数组特性：rules是数组类型，可以配置多个文件类型的处理规则
  • 匹配原则：通过正则表达式匹配文件后缀名（如/.css$/）

可以将loader的插件提取出来，例如：可以将Babel配置提取到babel.config.js中，可以将Postcss配置提取到postcss.config.js中

webpack的扩展性与loader

• • 处理流程：webpack遇到文件→匹配rules规则→使用指定loader处理→输出结果
  • 典型示例：
    • .vue文件使用vue-loader处理
    • .css文件使用css-loader处理
    • 图片文件使用file-loader处理

loader的配置方式

处理less文件less-loader

npm install less-loader -D

• 处理流程:
  • less-loader: 将less编译为css
  • css-loader: 解析css文件
  • style-loader: 将css注入到DOM中
• 执行顺序: 从右向左依次处理（less→css→style）

postcss工具安装插件使用

• 工具定义: PostCSS是一个通过JavaScript来转换样式的工具
• 核心功能:
  • 自动添加浏览器前缀
  • CSS样式重置
  • 其他CSS转换和适配功能
• 插件机制: 需要借助对应插件才能实现具体功能，工具本身只提供转换能力
• 处理流程:
  • postcss-loader处理（添加前缀等）
  • css-loader处理
  • style-loader处理

plugins数组指定要使用的插件

插件：PostCSS Preset Env

• • 包含更多常用功能的预设配置
  • 自动处理CSS新特性兼容性问题
  • 处理浏览器不识别的新CSS特性
  • 在打包阶段自动转换代码
  • 确保最终生成的CSS能被大多数浏览器解析

6.webpack打包图片

资源模块类型：asset module type

资源模块类型通过内置功能简化了资源处理流程，无需额外安装和配置loader。

• • asset/resource: 单独打包，产生网络请求
  • asset/inline: 转为base64编码嵌入JS
  • asset: 智能选择，根据大小自动切换

• 优化建议:

  • 小图片(如<60KB)使用base64减少请求
  • 大图片单独打包避免JS文件过大
  • 合理设置maxSize平衡性能

url-loader的limit效果

babel-loader：当webpack遇到.js文件时，会先用babel-loader进行转译

Babel的作用与必要性

将ES6+代码(如箭头函数、class)转换为ES5等更兼容的语法

• 核心功能：Babel是一个工具链，主要用于将ECMAScript 2015+代码转换为向后兼容的JavaScript版本，包括语法转换和源代码转换。
• 开发必要性： - 支持ES6+语法（如对象增强、箭头函数等） - 支持TypeScript开发 - 支持React项目（JSX转换）

babel安装插件麻烦也可用预设：babel-preset

• • @babel/preset-env：ES6+转换
  • @babel/preset-react：React转换
  • @babel/preset-typescript：TypeScript转换

7.resolve模块解析，文件解析,常配置的两个extensions、alias

resolve.extensions配置	设置自动补全的文件扩展名，默认值为['.wasm', '.mjs', '.js', '.json']
resolve.alias别名配置	通过路径映射简化深层引用，避免../../嵌套

• 文件解析流程：
  • 有扩展名时直接打包
  • 无扩展名时按resolve.extensions顺序尝试添加扩展名
  • 是文件夹时按resolve.mainFiles配置查找文件（默认['index']）
  • 再根据resolve.extensions解析扩展名

三、webpack常见插件(plugin)和模式(mode)

1.loader和plugin的区别

• 核心区别：
  • Loader作用：用于特定模块类型的转换，进行加载，进行解析时用，如处理.vue、.css、.png等确定类型的文件
  • Plugin作用：执行更广泛的任务，包括打包优化、资源管理、环境变量注入等 （执行loader外所有任务，并且贯穿整个生命周期）
• 典型应用：
  • 环境注入：DefinePlugin可以直接在JS代码中注入全局变量（如coderwhy），无需预先定义
  • 资源管理：CleanWebpackPlugin可自动清除旧打包文件，避免手动删除
  • 模板生成：HtmlWebpackPlugin可自动生成HTML模板文件
• 工作范围对比：
  • Loader局限：仅在文件转换阶段工作，如CSS-loader处理CSS文件
  • Plugin扩展：可处理Loader无法完成的任务，如将CSS提取为单独文件并用link引入
• 生命周期差异：
  • Loader：仅在文件加载转换时执行
  • Plugin：贯穿Webpack整个生命周期，从启动到打包完成均可介入
• 功能边界：
  • Loader职责：特定文件类型的加载和转换
  • Plugin职责：处理Loader之外的所有任务，包括但不限于优化、管理和注入

2.常用插件

1.CleanWebpackPlugin:自动清除打包目录的插件

2.HtmlWebpackPlugin:自动生成HTML文件并引入打包后的JS文件

• 打包后会在build文件夹自动生成index.html文件并引入打包后的JS文件(通过defer方式引入JS文件)

3.definePlugin:用于在 Webpack 中定义全局变量，解决打包时变量未定义的问题

• 内置变量：DefinePlugin默认会注入process.env.NODE_ENV变量
• 环境标识：该变量用于标识当前是开发环境(development)还是生产环境(production)
• • VueLoaderPlugin：处理.vue单文件组件
  • CleanWebpackPlugin：清理构建目录
  • HtmlWebpackPlugin：生成HTML文件并注入资源
  • DefinePlugin：定义全局常量

配置clean插件

• clean功能：在output配置中设置clean:true，表示在每次打包前会清空输出目录（默认是dist目录），然后再重新生成打包文件。
• 实现方式：
  • 可以直接在webpack.config.js的output配置中添加clean:true
  • 也可以使用clean-webpack-plugin插件实现类似功能
  • 两种方式效果相同，webpack5内置的clean功能已经足够使用

3.mode配置

• 定义作用: 告知webpack当前所处的环境，以便进行相应的内置优化
• 默认值: production（未设置时自动采用）
• 可选值: 'none'|'development'|'production'
• 开发建议:
  • 开发阶段使用development模式
  • 上线打包使用production模式

四、搭建本地服务器

1.webpack-dev-server

• 主要优势：自动编译+自动刷新浏览器
• 内存打包：打包结果保存在内存而非磁盘，性能更高
• 实时重载：实现live reloading功能
• 安装依赖：npm install webpack-dev-server -D
• 修改脚本：在package.json中添加serve命令
• 启动服务：执行npm run serve命令

总结

• CSS处理流程：
  • css-loader：解析CSS文件
  • less-loader：处理Less预处理器
  • postcss-loader：进行CSS后处理
• 打包其他资源：
  • asset module type：包含三种类型：
    • asset/resource：生成单独文件
    • asset/inline：内联为data URL
    • asset：自动选择资源大小阈值
  • Babel处理JS：转换ES6+语法
  • Vue文件处理：需要配合vue-loader和Vue插件
• 插件系统：
  • CleanWebpackPlugin：清理构建目录
  • HtmlWebpackPlugin：生成HTML文件
  • DefinePlugin：定义全局常量
• resolve配置：
  • extensions：自动解析扩展名
  • alias：设置路径别名
• 模式配置：
  • development：开发模式
  • production：生产模式
• 开发服务器：
  • webpack-dev-server：提供本地开发环境
  • HMR：热模块替换/更新技术