开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情
前言
这一篇主要介绍了什么是打包工具以及webpack的基本使用
打包工具
在开发时，我们会使用框架（Vue、React）,ES6 模块化语法，Less/Sass 等 css 预处理器语法进行开发。这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 语法，才能运行。打包工具就是帮助我们完成这些事情的工具。除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等,熟知的打包工具除了webpack之外还有vite以及前不久刚出的Turbopack等！
webpack的基本使用
Webpack 是一个静态资源打包工具。它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件进行输出，输出的文件就是浏览器可以识别运行的代码，我们将 Webpack 输出的文件叫做 bundle！
创建目录
开始使用之前，需要先创建一个目录，作为项目的根目录，所有的webpack指令都必须在根目录运行。
webpack_code # 项目根目录（所有指令必须在这个目录运行）
└── src # 项目源码目录
│ ├── js # js文件目录
│ │ ├── count.js
│ └── main.js # 项目主文件
└── public # 公开目录（用来存放一些场景不变的静态资源）
├── index.html
简单使用
创建完目录之后就可以简单写一些代码进行打包运行
// count.js
export default function count(x, y) {
return x - y;
}
// main.js
import count from "./js/count";
console.log(count(2, 1));
写完这些之后在index.html中引入main.js运行，在浏览器控制台会发现报错，说明es6模块化语法浏览器是识别不了的，所以我们就需要使用打包工具将代码编译成浏览器可识别的代码。
依赖下载
打开终端，先输入npm init -y生成package.json文件。注：package.json中name字段是不能叫webpack的，否则会导致下一步安装依赖的时候报错
依赖下载：
npm i webpack webpack-cli -D
启用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=xxx：指定模式（环境）。
输出文件
打包完成默认 Webpack 会将文件打包输出到 dist 目录下。
小结
Webpack 本身功能比较少，只能处理 js 资源，当遇到 css 等其他资源就会报错。所以学习 Webpack，主要学习如何处理其他资源，所以下一篇写webpack的基本配置!
