为什么要学习Webpack？

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

什么是 Webpack

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

多份资源文件打包成一个 Bundle
支持 Babel、Eslint、TS、CoffeeScript、Less、Sass
支持模块化处理css、图片等资源文件
支持 HMR + 开发服务器
支持持续监听、持续构建
支持代码里
支持 Tree-shaking
支持 Sourcemap
...

Webpack 打包核心流程

安装

npm i -D webpack webpack-cli

编辑配置文件

webpack.config.js

执行编译命令

npx webpack

Entry=>Dependencies Lookup =>Transform=>Bundle=>Output

1. 入口处理

entry

Get Start

从entry文件开始，启动编译流程

2. 依赖解析

require 、import

Dependencies Lookup

从entry文件开始，根据requireorimport等语句找到依赖资源

3. 资源解析

moudle

Transform

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

递归调用2、3，直到所有资源处理完毕

4.资源合并打包

output

Combine Assets

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

关键配置项介绍

entry：文件夹入口

output:文件夹出口

moudule/plugins

mode

watch/debSever/devtool

模块化+一致性

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

使用 Webpack

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

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

流程类配置

HMR

Hot Module Replacement ---模块热替换（热更新）

Loader组件

为了处理非标准JS资源，设计出资源翻译模块----Loader

用于将资源翻译为标准 JS

使用Loader

安装

npm add -D css-loader style-loader less-loader

2.添加 moudle 处理 css 文件

链式调用

less-loader：实现less=>css的转换
css-loader：将 CSS包装成类似module.exports = "${css}" 的内容，包装后的内容符合 JavaScript语法
style-loader：将css模块包进require语句，并在运行时调用 injectStyle 等函数将内容注入到页面的style标签

其他特性

特点：

链式执行
支持异步执行
分normal、pitch（有返回值，暂停后续运行）两种模式

Plugin组件

插件架构精髓：对拓展开放，对修改封闭

首先：插件围绕钩子展开 钩子的核心信息

时机
上下文：通过tapable提供的回调机制
交互

Webpack知识体系