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

课程内容

-什么是Webpack

-Webpack打包核心流程

-示例

-Entry=>Dependencids Lookup=>Transform => Output

-关键配置项介绍

-Loader组件

-Plugin组件

-如何学习Webpack

-入门级：学会灵活应用

-进阶：学会扩展Webpack

-大师：源码级理解Webpack打包编译原理

课程目标

一、为什么要学习Webpack？

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

什么是Webpack

可以手动管理这些资源：

出现了很多工程化工具（某种程度上正是这些工具的出现，才有了“前端工程”这一概念）

、

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

02、使用Webpack

使用Webpack——示例

核心流程——急速简化版

01入口处理——>02、依赖解析——>03、资源解析——>04、资源合并打包

2、3步骤都是递归调用，当所有的依赖都被解析完了后会结束

import foo from './foo';

export default 'bar';

可能一个依赖中要调用到另一个依赖，所以使用递归调用

模块化+一致性

怎么使用Webpack

Webpack使用基本围绕“配置”展开，配置可分为两类：

-流程类：作用于流程中某个 or 若干个环节，直接影响打包效果的配置项

-工具类：主流程之外，提供更多工程化能力的配置项

流程类配置

entry和context会影响到文件的输入

entry是定义文件的入口，Webpack会从这个入口去处理整个项目

context是定义Webpack在运行时从哪个路径去找资源

配置总览

module定义loader的属性

plugins定义Webpack插件

处理CSS

重要的是配置test去过滤文件

引入css文件

.main {
  font-size: 10px;
}

定义Webpack配置文件

如果不带上module，系统会报错，解析不了css文件

test属性后面是声明解释文件的类型，相当于一个过滤器，如果改成.less，则解析css文件错误

接入Bable

主要是解决浏览器不能适配es6版本，从而将es6版本代码转换成es5版本代码

es6代码

class Person {
  constructor() {
    this.name = 'Tecvan';
  }
}

console.log((new Person()).name)

const say = () => {};

bable后代码

使用HTML

使用插件html-webpack直接生成html文件

配置文件

生成的html

工具线

HMR

Hot Module Replacement —— 模块热替换

如在VScode中，写的CSS代码背景颜色修改后会在浏览器端直接显示，不用刷新

HMR的核心配置项就是将devServer中的hot设置为true

还有watch设置为true，会持续监听文件的变化

Tree-Shaking

Tree-Shaking——树摇，用于删除Dead Code（用于删除没有用到的代码）

Tree-Shaking的作用是删除foo

配置

03进阶篇、理解loader

loader的核心作用就是将非JS文件资源转换成JS资源

比较重要的是test和use两个属性

认识loader

其他特性

任何一个阶段有返回值就会结束

编写loader

常见loader

04、进阶篇——理解插件

插件是什么，为什么设计插件

不涉及插件

Webpack很多功能也是插件来实现

Webpack总共有239个钩子

在写一个插件时重要的是：

小结

我们前面学了：

Webpack的作用
理解Webpack配置结构，学习关键配置项
Loader的作用与常用Loader
插件基本形态与作用

Webpack知识体系