这是我参与「第五届青训营 」伴学笔记创作活动的第28天。

构建Webpack知识体系

什么是Webpack

前端项目由资源构成

Webpack本质上是一种前端资源编译，打包工具

使用Webpack

1. 安装 npm i -D webpack webpack-cil
2. 编辑配置文件
3. 执行编译命令 npx webpack

核心流程-简化版本

---

模块化+一致性

1. 多个文件资源合并成一个，减少HTTP请求数
2. 支持模块化开发
3. 支持高级JS特性
4. 支持Typescript、CoffeeScript
5. 统一图片、CSS、字体等其他资源的处理模型
6. ......

使用Wdbpack

关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类:

• 流程类:作用于流程中某个or若干个环节，直接影响打包效果的配项
• 工具类:主流程之外，提供更多工程化能力的配置项

流程类配置

配置总览

文件结构

src：

• index.js
• webpack.config.js

1. 声明入口‘entry’
2. 声明产物出口‘output’
3. 运行npx webpack

处理CSS

src：

• index.js
  • const styles = require('./index.css');
  • import styles from './index.css'(或）
• index.css
• webpack.config.js

1. 安装Loader npm add -D css-loader style-loader
2. 添加'module'处理css文件

接入Babel

1. 安装依赖 npm i -D @babel/code @babel/preset-env babel-loader
2. 声明产物出口'output'
3. 执行npx webpack

生成HTML

1. 安装依赖 npm i -D html-webpack-plugin
2. 声明产物出口'output'
3. 执行npx webpack

文件结构

• dist
  • index.html
  • main.js
• src
  • index.js
• webpack.config.js

工具线

HMR

hot module replacement————模块热替换

1. 开启HMR
2. 启动HMR npx webpack serve

Tree-Shaking

Tree-Shaking —— 树摇，用于删除Dead Code

• Dead Code
  • 代码没有被用到，不可到达
  • 代码的执行结果不会被用到
  • 代码只读不写
• Tree-Shaking
  • 模块导出了，但未被其他模块使用