这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天
一、本堂课重点内容:
二、详细知识点介绍:
什么是Webpack
本质上是一种前端资源编译、打包工具.
- 多份资源文件打包成一个 Bundle支持
- Babel、Eslint、TS、CoffeScript、 Less、Sass支持模块化处理css、图片等资源文件
- 支持HMR ＋开发服务器
- 支持持续监听、持续构建支持代码分离
- 支持Tree-shaking
- 支持Sourcemap
使用webpack
- 安装webpack
npm i -D webpack webpack-cli
- 配置文件
- 执行编译命令
npx webpack
Webpack核心概念
1、Entry：入口(Entry)指示 Webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。
2、Output：输出(Output)指示 Webpack 打包后的资源 bundles 输出到那里去，以及如何命名。
3、Loader：Loader 让 Webpack 能够去处理那些非 JavaScript 文件（webpack 自身只能理解JavaScript）
4、Plugins：插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
5、mode：模式(Mode)指示 Webpack 使用相应模式的配置。
核心流程
- 入口处理：从'entry'文件开始，启动编译流程
- 依赖解析：根据'require'和'import'等语句找到依赖资源
- 根据
module配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容 - 资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
不断进行2、3步后再进行第四步打包
三、引用参考：
- 青训营ppt
