Webpack 是一个模块打包工具。
自 2012年3月10日诞生，Webpack 到今年已经是一个有着悠久历史的老牌构建工具了。
Webpack 基于 Node.js 开发，默认采用了 CommonJS 模块化规范。每一个文件都是一个模块，默认支持的模块类型有 .js 和 .json。对于其他类型的模块，比如 .vue，.jsx，.ts、.css 以及图片类型的模块，都需要安装对应的 loader 进行编译处理。
核心概念
Webpack 中有一些非常重要的概念和特性：
- entry
- output
- module
- plugin
- loader
- mode
- chunk
- assets
- environment
- tree shaking
- source map
- HMR（hot module replace）
将这些概念和特性搞清楚，你对 webpack 就有足够深入的了解了。我们会采用逐步渐进的方式讲解 webpack 的用法，在这个过程中会把这些内容一一介绍到。
推荐阅读文档
Webpack 官方文档是非常好的学习资料，点击阅读。
文档包含了五个部分，分别是 API 介绍，概念介绍，配置项介绍，使用指南，迁移指南，loader 和 plugin 的介绍。
一个最简单的示例
本专栏中所用到的 node 包管理工具为 pnpm ，特点是快和节省磁盘空间。如果不熟悉 pnpm 的小伙伴请点击这里阅读文档，也可以搜索社区内的文章。当然你完全可以使用自己习惯的工具 npm 或者 yarn。
接下来看一个最简单的示例。
示例仓库
该系列的代码示例已经上传到 Github，点此访问。
创建项目
mkdir 01_basic
cd 01_basic
pnpm init目录结构为：
入口文件
// src/index.js
import { add } from './math'
const res = add(10, 20)
console.log(res)json 模块
// src/index.json
{
"name": "kw"
}math.js 模块
// src/math.js
export function add(a, b) {
return a + b
}我们的项目一般也是这样的结构，按功能划分模块，然后构建出一个完成的应用。
前端应用最终运行的环境一般都是浏览器，但是目前并不是所有的浏览器都支持这种模块化的代码。所以就需要用到 Webpack 打包工具，将源码打包成目标浏览器能识别的代码。
安装 Webpack
pnpm add -D webpack webpack-cli 在 Webpack4以前，只需要安装 webpack 就可以使用；从 4 版本以后，需要安装两个包：webpack：用来编译打包的核心包，它提供了 API 供在代码中调用。
webpack-cli：提供了在终端中使用 webpack 的命令
第一次打包
// pnpm webpack 相当于 npx webpack，会去 node_modules/.bin 目录中找到 webpack 命令来执行
pnpm webpack --mode development当执行 webpack 命令时，它会自动去找命令执行时所在目录下的 src/index.js 或者 src/index.json 作为打包的入口文件。还记得为什么会找 json 文件吗？因为在 Node 中的模块化规范中，.js 文件，.json 文件以及 .node 文件都属于文件模块。
找到入口文件后，会以 mode 选项指定的参数development 作为构建的模式进行打包。
打包出来的文件会输出到 dist 目录下，打包文件默认叫作 main.js。
使用打包文件
在 index.html 中引入打包后的文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpack5</title>
</head>
<body>
<script src="./dist/main.js"></script>
</body>
</html>打开浏览器，打开控制台：
经过 webpack 打包后的文件，可以正常在浏览器中使用了。
测试 IE
我们使用 IE11 浏览器打开 index.html，发现依然报错：
打开报错的地方，可以发现报错的地方是一个箭头函数的语法：
通过查询 Caniuse，发现 IE 全系浏览器竟然是不支持箭头函数的：
所以，在后面我们还需要借助 babel 工具，将箭头函数转为普通函数，来让 IE 识别。
从这个过程中也能体会到，webpack 仅仅是一个模块化的构建工具，对于一些高级的语法特性，它并没有做出处理。这其实属于兼容性的问题，包括 js 和 css 的兼容性。这个放到后面会讲到。
测试 json 模块的打包
将 index.js 重命名为其他文件，则 src 目录下的 index.json 就会被识别为可用的入口文件。
执行打包命令：
pnpm webpack --mode development
看下输出的 main.js 文件：
可见，webpack 默认能处理 json 模块，在查找模块时优先级次于 js 模块。
小结
本文就 Webpack 的简单使用做了演示，主要的知识点有：
- webpack 和 webpack-cli 的区别
- webpack 命令的使用
- webpack 默认的打包入口文件和输出文件
- webpack 只支持打包模块，不能处理语法
下篇文章，我们会讲解一些 Webpack 常用的配置选项。
