这是我参与「第四届青训营 」笔记创作活动的的第8天

前言

为什么要学习Webpack？

1. 理解前端“工程化”概念、工具、目标
2. 一个团队总要有几个人熟悉Webpack，某种程度上可以成为个人的核心竞争力
3. 高阶前端必经之路

什么是Webpack？

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

使用Webpack

核心流程

'entry'：Get Start

入口处理：从'entry'文件开始，启动编译流程

'require''import'：Dependencies Lookup

依赖解析：从'entry'文件开始，根据'require' or 'import'等语句找到依赖资源

'module'：Transform

资源解析：根据'module'配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容

'output'：Combine Assets

资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件

模块化+一致性

怎么使用Webpack

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

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

配置总览

处理CSS

1. 安装Loader

2. 添加'module'处理CSS文件

接入Babel

1. 安装依赖

2. 声明产物出口'output'
3. 执行'npx webpack'

生成HTML

1. 安装依赖

2. 声明产物出口'output'

3. 执行'npx webpack'