这是我参与「第四届青训营」笔记创作活动的的第13天
本堂课重点内容
- 使用 Webpack
详细知识点介绍
为什么要学习 webpack ?
-
理解前端 ”工程化“ 概念、工具、目标
-
一个团队总要有那么几个人熟悉 Webpack，某种程度上可以成为个人的核心竞争力
-
高阶前端必经之路
什么是 Webpack
在没有 Webpack 的 “旧时代” 非常突出的问题
-
手动管理前端资源，操作过程繁琐
-
当代码文件之间有依赖的时候，就得严格按依赖顺序书写
-
开发与生产环境一致，难以接入 TS 或 JS 新特性
-
比较难接入 Less , Sass 等工具
-
JS、图片、CSS 资源管理模型不一致
为了解决以上问题，才出现了许多工程化工具，某种程度上正是这些工具的出现，才有了 “前端工程" 这一概念
Webpack 本质上是一种前端资源编译、打包工具
-
多份资源文件打包成一个 Bundle
-
支持 Babel、Eslint、TS、 CoffeScript、Less、Sass
-
支持模块化处理 css、图片等资源文件
-
支持 HMR+ 开发服务器
-
支持持续监听、持续构建
-
...
使用 Webpack
-
安装
npm i -D webpack webpack-cli
-
编辑配置文件
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
核心流程
-
入口处理
从 'entry' 文件开始，启动编译流程
-
依赖解析
从 ‘entry` 文件开始，根据 'require` or 'import` 等语句找到依赖资源
-
资源解析
根据`module`配置，调用资源转移器，将png、css 等非标准 JS 资源转译为JS内容
递归调用2、3，直到所有资源处理完成
-
资源合并打包
将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
关于 Webpack 的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类:
-
流程类
作用于流程中某个 or 若干个环节,直接影响打包效果的配置项
-
工具类
主流程之外，提供更多工程化能力的配置项
学习方法
-
入门应用
-
理解打包流程
-
熟练掌握常用配置项、Loader、插件的使用方法，能够灵活搭建集成 Vue、React、 Babel、Eslint、Loss、Sass、图片处理等工具的 Webpack 环境
-
掌握常见脚手架工具的用法，例如:Vue-cli、create-react-app、@angular/cli
-
-
进阶
-
理解 Loader、Plugin 机制，能够自行开发 Webpack 组件
-
理解常见性能优化手段，并能用于解决实际问题
-
理解前端工程化概念与生态现状
-
-
大师级
- 阅读源码，理解 Webpack 编译、打包原理，甚至能够参与共建
课后个人总结
正如老师所说，Webpack 是一款能帮助解决各种包之间的复杂的依赖关系的前端项目构建工具。从课上老师演示的冰山一角可以看出 webpack 的强大功能，它还有许多其它的功能和配置是需要认真学习才能了解掌握的，而不是靠简单的一堂课一篇笔记就能理解。
引用参考
第四届字节跳动青训营「Webpack 知识体系」课程
