认识什么是Webpack

[1. 认识Webpack](#1. 认识Webpack)

[1.1. 什么是Webpack?（定义）](#1.1. 什么是Webpack?（定义）)

[1.2. 使用Webpack](#1.2. 使用Webpack)

[1.2.1. 需求](#1.2.1. 需求)

[1.2.2. 步骤](#1.2.2. 步骤)

[1.3. 入口和出口默认值](#1.3. 入口和出口默认值)

[1.3.1. 需求代码如下](#1.3.1. 需求代码如下)

[2. 修改Webpack打包入口和出口](#2. 修改Webpack打包入口和出口)

[2.1. 步骤：](#2.1. 步骤：)

[2.2. 注意](#2.2. 注意)

[3. Webpack自动生成html文件](#3. Webpack自动生成html文件)

[3.1. 插件 html-webpack-plugin](#3.1. 插件 html-webpack-plugin)

[3.2. 步骤](#3.2. 步骤)

[4. Webpack打包css代码](#4. Webpack打包css代码)

[4.1. 加载器 css-loader](#4.1. 加载器 css-loader)

[4.2. 加载器 style-loader](#4.2. 加载器 style-loader)

[4.3. 步骤](#4.3. 步骤)

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

javascript 复制代码

/**
 * 目标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 自定义命令）

javascript 复制代码

{
  "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"
  }
}