这是我参与「第五届青训营 」笔记创作活动的第13天
1.什么是Webpack
本质上是一种前端资源编译、打包工具
- 多份资源文件打包成一个Bundle
- 支持Babel、Eslint、 TS、 CoffeScript、 Less、Sass
- 支持模块化处理css、图片等资源文件
- 支持HMR +开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持Tree—shaking
- 支持Sourcemap
2.使用Webpack——示例
1.安装 npm i -D webpack webpack-cli
2.编辑配置文件
3.执行编译命令
核心流程——极度简化版
1.入口处理
从'entry' 文件开始，启动编译流程
2.依赖解析
从'entry' 文件开始，根据require' or import' 等语句找到依赖资源
3.资源解析
根据imodule' 配置，调用资源转移器，将png、CSS等非标准JS资源转译为JS内容
4.资源合并打包
将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
递归调用2、3，直到所有资源处理完毕
关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类:
- 流程类: 作用于流程中某个or若干个环节，直接影响打包效果的配置项
- 工具类:主流程之外，提供更多工程化能力的配置项
问题:
- Loader有什么作用?为什么这里需要用到CSS-loader、style-loader
- 与旧时代——在HTML文件中维护Css相比，这种方式会有什么优劣处?
- 有没有接触过Less、Sass、 Stylus 这一类CSS预编译框架?如何在Webpack接入这些工具?
接入Babel
1.安装依赖 npm i -D ababel/core @babel/preset-env babel- Loader
2.声明产物出口 output
3.执行npx webpack
思考题
相比于手工维护HTML内容，这种自动生成的方式有什么优缺点?
Tree——Shaking
开启tree -shaking :
mode:"production'optimization.usedExports: true
其他工具
- 缓存
- Sourcemap
- 性能监控
- 日志
- 代码压缩
- 分包
思考题:
除上面提到的内容，还有哪些配置可划分为“流程类”配置?
工具类配置具体有什么作用?包括devtool/ cache/stat等
