什么是Webpack？如何使用？-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44384728/article/details/128684855

文章介绍了为何需要打包工具，如Webpack，来处理ES6模块化语法、CSS预处理器等浏览器不识别的代码。Webpack是一个流行的静态资源打包工具，可以将项目文件编译、组合并输出为浏览器可执行的bundle。文章详细阐述了Webpack的使用步骤，包括设置资源目录、创建文件、下载依赖、启用Webpack的开发和生产模式，以及打包输出的结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么需要打包工具？

开发时，我们会使用框架（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 -D

4.启用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如何处理其他资源。