Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。当运行 webpack 时，它会递归地构建一个依赖关系图（dependency graph），其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

特性

  • 模块化：Webpack 可以将代码分割成多个模块，每个模块可以独立加载。
  • 懒加载：支持代码分割和懒加载，可以按需加载模块，提高页面加载速度。
  • 插件系统：Webpack 插件可以扩展其功能，如压缩、打包优化等。
  • 预处理器：Webpack 支持各种预处理器，如 Babel、TypeScript、Sass 等。

使用场景

  • 前端开发：Webpack 是前端开发中常用的工具，可以用于构建大型应用程序。
  • 模块打包：Webpack 可以将多个 JavaScript 文件打包成一个文件，减少 HTTP 请求。
  • 代码分割：Webpack 可以将代码分割成多个 bundle，按需加载，提高页面加载速度。

示例

假设我们有一个简单的 JavaScript 应用程序，包含两个模块：module1.js 和 module2.js。

// module1.js
export function hello() {
  console.log('Hello!');
}

// module2.js
import { hello } from './module1.js';
hello();

使用 Webpack 打包后，可以得到一个 bundle.js 文件，其中包含了 module1.js 和 module2.js 的代码。

Webpack 图标

更多关于 Webpack 的内容，请访问我们的 Webpack 教程。