目录
为什么需要打包工具？
开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。
这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能运行。
所以我们需要打包工具帮我们做完这些事。除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。
有哪些打包工具？
- Grunt
- Gulp
- Parcel
- Webpack
- Rollup
- Vite
- ...
目前市面上最流量的是 Webpack，所以我们主要以 Webpack 来介绍使用打包工具。Webpack是一个静态资源打包工具。它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以在浏览器端运行了。
我们将 Webpack输出的文件叫做bundle。
Webpack 本身功能是有限的:
- 开发模式：仅能编译 JS 中的 ES Module 语法
- 生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码
如何使用
1.资源目录
webpack_code # 项目根目录（所有指令必须在这个目录运行）
└── src # 项目源码目录
├── js # js文件目录
│ ├── count.js
│ └── multi.js
└── main.js # 项目主文件2.创建需要打包的文件
· count.js
export default function count(x, y) {
return x + y;
}· multi.js
export default function multi(...args) {
return args.reduce((p, c) => p * c, 0);
}· main.js
import count from "./js/count";
import multi from "./js/multi";
console.log(count(2, 1));
console.log(multi(1, 2, 3));3.下载依赖包
初始化 package.json以及下载webpack脚手架到开发模式 -D
npm init -y
npm i webpack webpack-cli -D4.启用Webpack
- 开发模式
npx webpack ./src/main.js --mode=development
- 生产模式
npx webpack ./src/main.js --mode=production
npx webpack 是用来运行本地安装 webpack 包的。
./src/main.js : 指定webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。
--mode = development/production：指定模式（环境）
5.打包输出结果
默认 webpack 会将文件打包输出到 dist 目录下;webpack不做其他配置时，只能处理 js 资源，一旦遇到 css 等其他资源就会报错。后续章节会介绍webpack如何处理其他资源。