这是我参与「第四届青训营 」笔记创作活动的的第17天
1.重点内容
在目前前端项目的开发中，作为团队协同开发，webpack是比不可少的，因此这节课就webpack为中心，构建webpack相关的知识体系。
2.重要的知识点
- 为什么要学习Webpack？
- 什么是Webpack
- Webpack打包核心
- Loader组件
- Plugin组件
- 学习Webpack
3.详尽的知识点
为什么要学习Webpack？
- 理解前端工程化的概念、工具、目标
- 成为个人的核心竞争力
- 通往高阶前端的必修
什么是Webpack
在前端的开发过程中，随着技术的迭代和发展，所包含的文件数量越来越多，这是就需要一个工具来管理这些文件。
此时Webpack等工程化工具的出现，引出了前端工程的概念。
Webpack本质上是一种前端资源编译、打包工具。
Webpack打包核心
使用Webpack
- 安装Webpack
- 编辑配置文件 webpack.config.js
- 执行编译命令
核心流程
- 入口处理，从"entry"文件开始，启动编译流程
- 依赖解析，根据"require","import"等语句找到依赖资源
- 资源解析，根据"module"配置，将非标准JS资源转译成JS内容
- 资源合并打包，将转译后的资源内容合并打包为可直接运行的JS文件
其中第二第三步两步递归调用，解析所有资源文件。
如何使用Webpack
使用Webpack的核心就是围绕配置展开，配置可以大致分为两类
-
流程类
- 作用于打包流程中的某个环节，直接影响打包效果
- entry/output
- module/plugins
- mode
-
工具类
- 提高更多工程化能力的配置项
- watch/devServer/devtool
以处理CSS为例
- 安装处理CSS的Loader
> npm add -D css-loader style-loader
复制代码
- 添加"module"处理CSS文件
module.exports = {
module: {
rules: [{
test: /.css/i,
use: [
"style-loader",
"css-loader"
]
}]
}
}
复制代码
处理JS文件
- 安装依赖
> npm i -D @babel/core @babel/preset-env babel-loader
复制代码
- 声明产物出口
module: {
rules: [{
test: /.js/i,
use: [
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env'
]
]
}
]
}]
}
复制代码
- 执行命令
> npx webpack
复制代码
处理HTML文件
- 安装依赖
> npm i -D html-webpack-plugin
复制代码
- 声明产物出口
plugins: [new HTMLWebpackPlugin()]
复制代码
- 执行命令
提升代码效率
- HMR(Hot Module Replacement) 模块热替换
- Tree-Shaking 删除无用代码
- 缓存
- Sourcemap
- 性能监控
- ...
Loader组件
因为Webpack只认识JS文件，所以我们需要使用Loader组件将其他语言的资源转译成JS文件来被Webpack识别。
Loader的链式调用
以CSS处理为例
- 首先使用less-loader将less转译成css
- 使用css-loader将CSS包包装成module.exports = "${css}"的内容
- 使用style-loader将CSS包进require语句，调用injectStyle将内容注入到style标签
Loader的特性
- 链式执行
- 支持异步执行
- 分normal、pitch模式
Plugin组件
插件在许多知名工具如VS Code，Web Storm中很常见，使用插件已经成为日常开发中必不可少的内容，但是为什么要使用插件而不是直接集成在软件内部，这是我们需要考虑的。
使用插件的原因：
- 如果集成在软件内部，则整个流程细节会很复杂，上手成本高
- 功能迭代的成本高
- 功能僵化，缺乏成长性
- ...
使用插件的原因就是对扩展开发，对修改封闭。
学习Webpack
- 理解打包流程
- 掌握常用配置项，loader，插件的使用方法
- 掌握常见手脚架
- 理解Loader，Plugin机制
- 理解性能优化方法手段
- 理解前端工程化和生态现状
- 阅读源码，参与开源共建
4.课后总结
Webpack作为常用工具，作为开发人员不仅需要掌握其使用方法，更应该掌握Webpack的相关知识体系。这样更有利于团队化，工程化的前端项目。
