一.什么是Webpack

Webpack是一种前端资源编译、打包工具

前端项目由许多资源构成，如图片资源（JPG、PNG、GIF）、网页样式(CSS)、前端框架（Vue、React）等等，最初这些资源由手动管理，随着项目的增大，维护的成本、困难度与日俱增，随着前端发展，出现了许多前端工程化工具，webpack就是其中之一。

Webpack的主要功能：

• 多份资源文件打包成一个Bundle，减少http请求数
• 支持 Babel、Eslint、TS、 CoffeScript、Less、Sass
• 支持高级JS特性
• 支持模块化处理css、图片等资源文件，支持HMR＋开发服务器
• 支持持续监听、持续构建支持代码分离
• 支持Tree-shaking、Sourcemap

二.使用Webpack

1.安装相关依赖

 npm i -D webpack webpack-cli

2.编辑配置文件

3.执行编译命令

npx webpack

三.Webpack的核心流程

• 入口处理：从 entry 文件开始，启动编译流程。

• 依赖分析：从entry文件开始，根据requireorimport等语句找到依赖资源。

• 资源解析：根据 module配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容。

• 资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件。

递归调用2、3，直到所有资源处理完毕

四.Webpack配置总览

Webpack处理CSS

1.安装Loader

npm add -D css-loader style-loader

2.添加module处理css文件

3.在终端运行npx webpack

Webpack接入Babel

1.安装依赖

npm i -D @babel/core @babel/preset-env babel-loader

2.声明产物出口output

3.在终端运行npx webpack