这是我参与「第五届青训营」伴学笔记创作活动的第6天
Webpack知识体系
为什么要学习Webpack
- 理解前端“工程化”概念、工具、目标
- 一个团队总要有那么几个人熟悉 Webpack，某种程度上可以成为个人的核心竞争力
- 高阶前端必经之路
前端项目由什么构成?- 资源
- 依赖手工，比如有50个JS文件...操作，过程繁琐
- 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
- 开发与生产环境一致，难以接入 TS 或 JS 新特性
- Less、Sass 等工具比较难接入
- JS、图片、CSS 资源管理模型不一致 这些都是旧时代非常突出的问题，对开发效率影响非常大
出现了很多工程化工具,某种程度上正是这些工具的出现，才有了“前端工程”这一概念
使用webpack(处理CSS)
- 安装webpack和webpack-cli，添加依赖
- 写入webpack配置文件
- 终端执行npx webpack
打包核心流程如下(实质就是模块化和一致性)
只有entry和output是必须的
- 输入:
entry(项目入口文件),context - 模块解析:
resolve,externals - 模块转译:
module(定义loader属性) - 后处理:
optimization,mode,targetplugins定义webpack的插件
关于 Webpack 的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类
- 流程类: 作用于流程中某个 or 若干个环节直接影响打包效果的配置项
- 工具类: 主流程之外，提供更多工程化能力的配置项
在module中，想要对其他文件完成解析,就需要在use中使用loader(针对不同后缀名使用不同的处理loader):
问题:
- Loader 有什么作用? 为什么这里需要用到 css-loader、style-loader
- 与旧时代——在 HTML 文件中维护 css 相比，这种方式会有什么优劣处?
- 有没有接触过 Less、Sass、Stylus 这一类 CSS 预编译框架? 如何在 Webpack 接入这些工具? 参考资料:
- Css-loader
- Webpack 原理系列七: 如何编写Loader
- Style-loader
使用webpack(处理js):接入babel 相当于是一个将高版本的js代码转译成低版本的，从而提高兼容性
思考题:
- Babel 具体有什么功能?
- Babel 与 Webpack 分别解决了什么问题? 为何两者能协作到一起了?
参考资料:
- Babel-loader
- Babel 官网
- @babel/preset-env
- @babel/preset-react
- @babel/preset-typescript
使用webpack(生成html，相当于直接不写了)
思考题：
- 相比于手工维护 HTML 内容，这种自动生成的方式有什么优缺点? 参考资料：
- html-webpack-plugin
Hot Module Replacement -- 模块热替换 不需要刷新，直接更新代码显示
Tree-shaking :删除未用代码
其它工具:
- 缓存:v5前效果不好
- Sourcemap:压缩后代码映射回开始开发状态
- 性能监控
- 日志
- 代码压缩
- 分包
标题：Webpack 定义解析 - 掘金
