这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天
Webpack知识体系 ｜ 青训营笔记
本堂课重点内容：
- 什么是Webpack？
- 使用Webpack
1.什么是Webpack？
- 前端项目由什么构成？ png、jpg、gif、webp、js、ts、css等等。
这些资源需要我们手动去管理。
缺点：
- 依赖手工，比如有50个JS文件...操作，过程繁琐
- 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
- 开发与生产环境一致，难以接入 TS 或JS 新特性
- 比较难接入 Less、Sass 等工具
- JS、图片、CSS 资源管理模型不一致
webpack是一种前端资源编译、打包工具
- 多份资源文件打包成一个 Bundle
- 支持Babel,Eslint、TS、CoffeScript、Less、Sass
- 支持模块化处理 css、图片 等资源文件
- 支持 HMR + 开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持 Tree-shaking
- 支持 Sourcemap
2.使用Webpack
- 多个文件资源合并成一个，减少 http 请求数
- 支持模块化开发
- 支持高级 JS 特性
- 支持 Typescript、CoffeeScript 方言
- 统一图片、CSS、字体 等其它资源的处理模型
关于 Webpack 的使用方法，基本都围绕”配置展开，而这些配置大致可划分为两类：
- 流程类: 作用于流程中某个 or 若干个环节直接影响打包效果的配置项
- 工具类:主流程之外，提供更多工程化能力的配置项
按使用频率
- entry/output
- module/plugins
- mode
- watch/devServer/devtool
处理CSS
- 安装Loader
- 添加'module'处理CSS文件
问题
- Loader 有什么作用? 为什么这里需要用到 css-loader、style-loader
- 与旧时代一一在 HTML 文件中维护 css 相比，这种方式会有什么优劣处?
- 有没有接触过 Less、Sass、Stylus 这一类 CSS 编译框架? 如何在 Webpack 接入这些工具?
接入Babel
- 安装依赖
- 声明产物出口output
- 执行npx webpack
问题
- Babel 具体有什么功能?
- Babel 与 Webpack 分别解决了什么问题? 为何两者能协作到一起了?
生成HTML
1.安装依赖
2. 声明产物出口output
3. 执行npx webpack
