这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天
为什么要学习Webpack？
- 理解前端“工程化”概念、工具、目标
- 一个团队总要有那么几个人熟悉Webpack,某种程度上可以成为个人的核心竞争力
- 高阶前端必经之路
总体课程目标
- 理解Webpack的基本用法
- 通过介绍Webpack功能、Loader与Plugin组件设计，建立一个知识体系。
1.什么是Webpack？
前端项目由什么构成？ ——资源
Webpack本质上是一种前端资源编译打包工具
- 多份资源文件打包成一个bundle
- 支持模块化处理css、图片等资源文件
- 支持HMR+开发服务器
- 支持代码分离
- 支持Tree-shaking
- 支持Sourcemap
2.使用Webpack
1. 安装
npm i -D webpack webpack-cli
2. 编辑配置文件
3.执行编译命令
npx webpack
核心流程
- 入口处理：从'entry文件开始，启动编译流程
- 依赖解析：从'entry文件开始，根据'require or import 等语句找到依赖资源
- 资源解析：根据 module配置，调用资源转移器，将png、css 等非标准JS资源转译为JS内容
- 资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
围绕“配置展开”
关于Webpack的使用方法，基本都围绕“配置展开，而这些配置大致可划分为两类：
- 流程类：作用于流程中某个or若干个环节直接影响打包效果的配置项
- 工具类：主流程之外，提供更多工程化能力的配置项
流程类配置
使用Webpack——处理CSS
问题：
- Loader有什么作用？为什么这里需要用到css-loader、style-loader
- 与旧时代——在HTML文件中维护css相比，这种方式会有什么优劣处？
- 有没有接触过Less、Sass、Stylus这一类CSS预编译框架？如何在Webpack接入这些工具？
Babel
处理JS的代码转译工具
Babel 默认使用一组 ES2015 语法转换器，允许你使用新的语法，无需等待浏览器支持。
把其他版本的JS代码给统一
Tree-shaking
用于处理Dead Code
- 代码没有被用到，不可到达
- 代码的执行结果不会被用到
- 代码只读不写
