构建Webpack知识体系 | 青训营笔记构建Webpack知识体系 | 青训营笔记这是我参与「第四届青训营」笔记创

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

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

什么是Webpack

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

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

使用Webpack

1.安装

npm i -D webpack webpack-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'
        }]
    }
}

3.执行编译命令

npx webpack

流程

1.入口处理

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

2.依赖解析

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

3.资源解析

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

4.资源合井打包

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

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

优点

模块化+一致性

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

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

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

参考资料：

Webpack 原理系列七：如何编写

webpack

什么是Loader

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

认识Loader:链式调用

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

认识Loader:其它特性

特点：链式执行支持异步执行分normal、pitch两种模式link

常见Loader

站在使用角度，建议掌握这些常见Loader的功能、配置方法

理解插件

插件围绕钩子展开

钩子的核心信息：

时机：编译过程的特定节点，Webpack会以钩子形式通知插件此刻正在发生什么事情；
上下文：通过tapable提供的回调机制，以参数方式传递上下文信息；
交互：在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变

学习方法

1.入门应用

理解打包流程
熟练掌握常用配置项、Loader、插件的使用方法，能够灵活搭集成Vue、React、Babel、Eslint、Legg、Sass、图片处理等工具的Webpack 环境
掌握常见脚手架工具的用法，例如：Vue-ci、create-react-app.@angular/cli

2.进阶

理解Loader、Plugin机制，能够自行开发Webpack组件
理解常见性能优化手段，井能用于解决实际问题
理解前端工程化概念与生态现状

3.大师级

阅读源码，理解Webpack编译、打包原理，甚至能够参与共建

优质资源推荐

《深入浅出 Webpack》

Awesome Webpack4+

《SurviveJS - Webpack and React》

Webpack 教程

Webpack 5 知识体系 - GitMind

[源码解读] Webpack 插件架构深度讲解

[万字总结] 一文吃透 Webpack 核心原理

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