前言

Webpack本质上是一种前端资源编译，打包工具

详细知识点介绍

什么是Webpack

前端项目的构成

支持功能

• 多份资源文件打包成一个Bundle
• 支持模板化处理css、图片等资源服务器
• 支持HMR + 开发服务器
• 支持代码分离
• 支持持续监听、持续构建等

核心流程

1. 入口处理：从‘entry’文件开始，启动编译流程
2. 依赖解析：从‘entry’文件开始，根据‘require’ or ‘import’等语句找到依赖资源
3. 资源解析：根据‘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的常用配置项
• 用一些脚手架