什么是Webpack
前端项目的构成
网络异常，图片无法展示
|
支持功能
- 多份资源文件打包成一个Bundle
- 支持模板化处理css、图片等资源服务器
- 支持HMR + 开发服务器
- 支持代码分离
- 支持持续监听、持续构建等
核心流程
网络异常，图片无法展示
|
- 入口处理：从‘entry’文件开始，启动编译流程
- 依赖解析：从‘entry’文件开始，根据‘require’ or ‘import’等语句找到依赖资源
- 资源解析：根据‘module’配置，调用资源转换器，将png、css等非标准JS资源转译为JS内容
使用Webpack
首先本地环境上有node.js
安装：npm i —D webpack webpack-cli
执行编译命令：npx webpack
关于使用Webpack的方法，基本围绕“配置”展开的：
- 流程类：作用于流程中的某个 or 若干个环节，直接影响打包效果的配置项
- 工具类：主流程之外，提供更多工程化能力的配置项
案例
项目初始化：npm init -y
安装webpack：npm i webpack webpack-cli -D
网络异常，图片无法展示
|
打包成功后会出现一个webpack相关的版本号
网络异常，图片无法展示
|
打包后的文件在dist里，里面的东西也是相当的多，
网络异常，图片无法展示
|
Lodaer
为了处理非标准JS资源，设计出资源翻译模块loader
Loader(加载器) 是 webpack 的核心之一。它用于将不同类型的文件转换为 webpack 可识别的模块。
总结
- 掌握Webpack的打包流程
- 能够使用Webpack的常用配置项
- 用一些脚手架
