Webpack简介及打包演示

Webpack简介及打包演示
1. Webpack 是一个静态模块打包工具，从入口构建依赖图，打包有关的模块，最后用于展示你的内容
2. 静态模块：编写代码过程中的，html，css， js，图片等固定内容的文件
3. 打包过程，注意：只有和入口有直接/间接引入关系的模块，才会被打包
1. Webpack 的作用：把静态模块内容，压缩，整合，转译等（前端工程化）
  - 把 less/sass 转成 css 代码
  - 把 ES6+ 降级成 ES5 等
  - 支持多种模块文件类型，多种模块标准语法
2. 为何不学 vite？
  
  现在很多项目还是基于 Webpack 来进行构建的，所以还是要掌握 Webpack 的使用
3. 体验 Webpack 打包 2 个 JS 文件内容
4. 需求：封装 utils 包，校验手机号和验证码长度，在 src/index.js 中使用，使用 Webpack 打包
5. 步骤：
  1. 新建项目文件夹 Webpack_study，初始化包环境，得到 package.json 文件
    
    npm init -y
    1
  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
    1
    2
    3
    
    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 自定义命令）
    1
    2
    3
    4
    5
    6
    7
    8
    9
  3. 下载 webpack webpack-cli 到项目（版本独立）
    
    npm i webpack webpack-cli --save-dev
    1
    
    注意：虽然 webpack 是全局软件包，封装的是命令工具，但是为了保证项目之间版本分别独立，所以这次比较特殊，下载到某个项目环境下，但是需要把 webpack 命令配置到 package.json 的 scripts 自定义命令，作为局部命令使用
  1. 项目中运行工具命令，采用自定义命令的方式（局部命令）
    
    npm run build
    1
    
    npm run 自定义命令名字
    
    注意：实际上在终端运行的是 build 右侧的具体命名
  2. 自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码）
6. 需求最终流程图：
  
  执行完打包流程后，会在项目下生产dist/main.js
```
(()=>{"use strict";console.log(!0),console.log(!1)})();
1
```
这是编译完的结果，从index.js开始执行编译，调用对应的check方法，check方法所产生的结果已经展示在编译后的文件中，所以这两个check方法就不会再整合到dist文件中了。

Webpack 修改入口和出口
1. 使用Webpack默认的打包入口路径是从./src/index.js开始的，打包后的文件默认输出位置为：./dist/main.js。
2. Webpack 配置：影响 Webpack 打包过程
3. 步骤：
  1. 项目根目录，新建 Webpack.config.js 配置文件
  2. 导出配置对象，配置入口，出口文件路径（别忘了修改磁盘文件夹和文件的名字）
    
    const path = require('path') module.exports = { entry: path.resolve(__dirname, 'src/login/index.js'), output: { path: path.resolve(__dirname, 'dist'), filename: './login/index.js' } }
    1
    2
    3
    4
    5
    6
    7
    8
    9
  3. 重新打包就能发现效果
案例-用户登录-长度判断

 目标

体验前端项目代码，如何被 Webpack 打包和使用

 讲解
1. 需求：点击登录按钮，判断手机号和验证码长度是否符合要求
2. 步骤：
  1. 新建 public/login.html 准备网页模板（方便查找标签和后期自动生成 html 文件做准备）
  2. 核心 JS 代码写在 src/login/index.js 文件
    
    /** * 目标3：用户登录-长度判断案例 * 3.1 准备用户登录页面 * 3.2 编写核心 JS 逻辑代码 * 3.3 打包并手动复制网页到 dist 下，引入打包后的 js，运行 */ // 3.2 编写核心 JS 逻辑代码 document.querySelector('.btn').addEventListener('click', () => { const phone = document.querySelector('.login-form [name=mobile]').value const code = document.querySelector('.login-form [name=code]').value if (!checkPhone(phone)) { console.log('手机号长度必须是11位') return } if (!checkCode(code)) { console.log('验证码长度必须是6位') return } console.log('提交到服务器登录...') })
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
  3. 运行自定义命令，让 Webpack 打包 JS 代码
  4. 手动复制 public/login.html 到 dist 下，手动引入打包后的 JS 代码文件，运行 dist/login.html 在浏览器查看效果
小结

由于Webpack默认只会打包js资源，html并不会打包进入，生成的打包js会放在dist中，html要想调用打包后的js也需要放到dist文件夹中，并且通过

Webpack 修改入口和出口

案例-用户登录-长度判断

目标

讲解

小结