Webpack 是一个静态资源打包工具。
它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。
输出的文件就是编译好的文件，就可以在浏览器段运行了。
我们将 Webpack 输出的文件叫做 bundle。
# 功能介绍
Webpack 本身功能是有限的:
开发模式：仅能编译 JS 中的 ES Module 语法
生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码
## 2.创建文件
## 3. 下载依赖
打开终端，来到项目根目录。运行以下指令：
初始化package.json
```javascript
npm init -y
```
此时会生成一个基础的 package.json 文件。
需要注意的是 package.json 中 name 字段不能叫做 webpack, 否则下一步会报错
下载依赖
```javascript
npm i webpack webpack-cli -D
```
# 4. 启用 Webpack
开发模式
```javascript
npx webpack ./src/main.js --mode=development
```
生产模式
```javascript
npx webpack ./src/main.js --mode=production
```
npx webpack: 是用来运行本地安装 Webpack 包的。
./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。
--mode=xxx：指定模式（环境）。
## 基本配置
在开始使用 Webpack 之前，我们需要对 Webpack 的配置有一定的认识。
# 5 大核心概念
entry（入口）
指示 Webpack 从哪个文件开始打包
output（输出）
指示 Webpack 打包完的文件输出到哪里去，如何命名等
loader（加载器）
webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析
plugins（插件）
扩展 Webpack 的功能
mode（模式）
主要由两种模式：
开发模式：development
生产模式：production
# 准备 Webpack 配置文件
在项目根目录下新建文件：webpack.config.js
```javascript
module.exports = {
// 入口
entry: "",
// 输出
output: {},
// 加载器
module: {
rules: [],
},
// 插件
plugins: [],
// 模式
mode: "",
};
```
修改配置文件
配置文件
```javascript
// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
module.exports = {
// 入口
// 相对路径和绝对路径都行
entry: "./src/main.js",
// 输出
output: {
// path: 文件输出目录，必须是绝对路径
// path.resolve()方法返回一个绝对路径
// __dirname 当前文件的文件夹绝对路径
path: path.resolve(__dirname, "dist"),
// filename: 输出文件名
filename: "main.js",
},
// 加载器
module: {
rules: [],
},
// 插件
plugins: [],
// 模式
mode: "development", // 开发模式
};
```
运行指令
```javascript
npx webpack
```
此时功能和之前一样，也不能处理样式资源