目录
1. 认识Webpack
1.1. 什么是Webpack?（定义）
静态模块：指的是编写代码过程中的，html，css，js，图片等固定内容的文件
打包：把静态模块内容，压缩，整合，转译等（前端工程化）
把 less / sass 转成 css 代码
把 ES6+ 降级成 ES5
支持多种模块标准语法
1.2. 使用Webpack
1.2.1. 需求
- 封装 utils 包，校验手机号长度和验证码长度，在 src/index.js 中使用并打包观察
1.2.2. 步骤
- 新建并初始化项目，编写业务源代码
- 下载 webpack webpack-cli 到当前项目中（版本独立）
npm i webpack webpack-cli --save
- 配置局部自定义命令
- 运行打包命令，自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码）
npm run build
1.3. 入口和出口默认值
- 入口的默认值是'./src/index.js'
- 出口的默认值是'./dist/main.js'
1.3.1. 需求代码如下
// 封装校验手机号长度和校验验证码长度的函数
export const checkPhone = phone => phone.length === 11
export const checkCode = code => code.length === 6/**
* 目标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 自定义命令）{
"name": "test01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.91.0",
"webpack-cli": "^5.1.4"
}
}
2. 修改Webpack打包入口和出口
2.1. 步骤：
- 项目根目录，新建 webpack.config.js 配置文件
- 导出配置对象，配置入口，出口文件的路径
- 重新打包观察
2.2. 注意
- 只有和入口产生直接/间接的引入关系，才会被打包
在出口output对象里面添加属性——clean: true //生成打包后内容之前，清空输出目录
3. Webpack自动生成html文件
3.1. 插件 html-webpack-plugin
- 在 Webpack 打包时生成 html 文件
3.2. 步骤
- 下载 html-webpack-plugin 本地软件包
npm i html-webpack-plugin --save-dev
- 配置 webpack.config.js 让 Webpack 拥有插件功能
- 重新打包观察效果
4. Webpack打包css代码
注意：
Webpack 默认只识别 js 代码
把css文件要跟入口文件产生引入关系
4.1. 加载器 css-loader
- 解析 css 代码
4.2. 加载器 style-loader
- 把解析后的 css 代码插入到 DOM
4.3. 步骤
- 准备 css 文件代码引入到 src/login/index.js 中（压缩转译处理等）
- 下载 css-loader 和 style-loader 本地软件包
npm i css-loader style-loader --save-dev
- 配置 webpack.config.js 让 Webpack 拥有该加载器功能
- 打包后观察效果
