Webpack使用方法 | 青训营笔记

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

一. 流程类配置

二. 处理 CSS

三. 接入 Bable

四. 生成 HTML

五. 使用 Webpack - 工具线

让我们从一个简单的应用实例开始：

工作流程：
1、通过配置找到给定的入口文件（如index.js）
2、从入口文件开始分析并处理项目所有的依赖模块，并递归地构建一个依赖关系图（dependency graph）。webpack把所有的文件都当做模块。

• JavaScript模块：webpack自己本身就可以识别并处理
• 其他模块：通过使用loaders来分析和转译浏览器不认识的模块为浏览器认识的格式

3、把所有的模块打包为一个或多个浏览器可识别的JavaScript文件，默认叫做bundle.js（也可以自己改名），根据给定的输出地址，输出到指定目录，一般叫做dist。

插件基本结构

plugins是可以用自身原型方法apply来实例化的对象。apply只在安装插件被Webpack compiler执行一次。apply方法传入一个webpck compiler的引用，来访问编译器回调。

那我们先来分析一下webpack Plugin的工作原理

1. 读取配置的过程中会先执行 new HelloPlugin(options) 初始化一个 HelloPlugin 获得其实例。
2. 初始化 compiler 对象后调用 HelloPlugin.apply(compiler) 给插件实例传入 compiler 对象。
3. 插件实例在获取到 compiler 对象后，就可以通过compiler.plugin(事件名称, 回调函数) 监听到 Webpack 广播出来的事件。 并且可以通过 compiler 对象去操作 Webpack。

Webpack本质上做的是模块化与一致性：

对不同类型的资源都支持相同的语言或方言，也支持多个资源的合并与打包

归根结底，Webpack的使用是围绕配置展开的

一. 流程类配置

接下来，我们来总览一下流程类配置

二. 处理 CSS

三. 接入 Bable

四. 生成 HTML

五. 使用 Webpack - 工具线

我们接着来看工具线的具体用法

HMR

Tree-Shaking

当然,Webpack不止有这些工具，还有许多配置效果能大大提高我们的开发效率，像下图所示的这些

总结

本节课文杰老师带来了 Webpack 的使用方法，帮助我们从理论到实践，通过对Webpack工具的代码展示与案例讲解，了解关于 Webpack 的具体使用方法，其中老师补充的Webpack工具线的其他工具的例子让我受益匪浅。