8、构建高效 React 应用：Webpack 实战指南

构建高效 React 应用：Webpack 实战指南

1. Webpack 简介

Webpack 是一款强大的现代 Web 应用模块打包工具，在前端开发中广泛用于管理和打包 JavaScript、CSS、图片等资源。它能将代码组织成模块，然后打包成一个优化后的输出文件。

Webpack 的核心工作原理是：以一个入口文件为起点，递归构建该入口文件所依赖的所有模块的依赖图，再根据这个依赖图创建一个包含所有必要模块及其依赖的输出文件。

使用 Webpack 的一个关键优势是可以利用各种加载器（Loaders）和插件（Plugins）来转换代码和资源。例如，使用 React 时，可以用 Babel 加载器将 JSX 代码转换为普通 JavaScript 代码；使用 CSS 加载器将 CSS 文件导入到 JavaScript 代码中；使用图片加载器导入图片。

下面是一个简单示例，展示 Webpack 的工作方式：
- 创建入口文件 index.js ：

import { hello } from './greeting';
console.log(hello('World'));

• 创建 greeting.js 模块 ：

export function hello(name) {