构建Webpack知识体系 | 青训营笔记

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

今天了解到了一个打包工具，就让我们走进今天的学习，来了解一下吧

为什么要学习Webpack

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

什么是Webpack

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

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

使用Webpack

使用Webpack-实例

1、安装

npm i -D webpack wepack-cli

2、编辑配置文件

module.exports = {
    entry: 'main.js',
    output: {
    filename: "[name].js",
    path: path.join(__dirname, "./dist"),
    },
    module: {
        rules:[{
            test: /\.less$/i,
            use: ['style-loader','css-loader','less-loader']
        }]
    }
}

执行编译命令

npx webpack

核心流程

1、入口处理

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

2、依赖解析

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

3、资源解析

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

4、资源合并打包

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

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

模块化+ 一致性

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

使用Webpack

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

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

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

使用Webpack--流程类配置

1、输入：entry context

2、模块解析：resolve externals

3、模块转译： module

理解Loader

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

用于将资源翻译为标准JS

使用Loader

1、安装Loader

2、添加module处理css文件

认识Loader：链式调用

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

理解插件

Webpack本身的很多功能也是基于插件实现的

首先：插件围绕钩子展开

钩子的核心信息：

1、时机：编译过程的特定节点，Webpack会以钩子形式通知插件此刻正在发生什么事情；

2、上下文：通过tapable提供的回调机制，以参数方式传递上下文信息；

3、交互：在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变

总结

webpack是代码编译工具，有出口、入口、loader和插件，是一个静态模块打包工具。我们需要理解打包流程，掌握常用的配置项。这样我们就能一点一点的掌握它了。

学到这我想大家也对Webpack有了初步的认识了吧

如果你有任何建议都可以在评论区留言，或发电子邮箱，欢迎大家评论留言(ˆ⌣ˆ）

作者：Yifan

日期：2022年7月24日

电子邮箱：1279640748@qq.com