Webpack 是目前前端项目构建中最流行的模块打包工具之一。它能将项目中的各种资源（JavaScript、CSS、图片等）打包成浏览器可以识别的静态文件，极大地提高了开发和部署效率。

Webpack 详解

1. 什么是 Webpack？

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。它会递归地构建依赖关系图，将项目中的所有模块打包成一个或多个 bundle。

2. Webpack 的核心概念

概念说明
Entry入口起点，Webpack 从这里开始构建依赖图。
Output输出配置，指定打包后的文件保存路径和名称。
Loader加载器，用于处理非 JavaScript 文件（如 CSS、图片）。
Plugin插件，用于执行范围更广的任务，如代码压缩、打包优化。
Mode模式，development（开发）和 production（生产）。

3. Webpack 基本配置示例

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',            // 入口文件
  output: {
    filename: 'bundle.js',            // 打包后文件名
    path: path.resolve(__dirname, 'dist'), // 输出路径，必须是绝对路径
  },
  module: {
    rules: [
      {
        test: /\.css$/,               // 匹配 CSS 文件
        use: ['style-loader', 'css-loader'], // 使用 Loader
      },
      {
        test: /\.(png|jpg|gif)$/,    // 匹配图片文件
        use: [
          {
            loader: 'file-loader',   // 处理图片资源
            options: {
              name: '[name].[ext]',
              outputPath: 'images/',
            },
          },
        ],
      },
    ],
  },
  mode: 'development',               // 开发模式
};

4. 常用命令

  • webpack — 使用配置文件打包
  • webpack --mode production — 生产环境打包，自动压缩代码
  • webpack-dev-server — 本地开发服务器，支持热更新

5. 生态系统与插件

  • HtmlWebpackPlugin — 生成 HTML 文件并自动注入打包资源
  • MiniCssExtractPlugin — 分离 CSS 文件，适合生产环境
  • CleanWebpackPlugin — 构建前清理输出目录
  • DefinePlugin — 定义全局常量，支持环境变量替换

6. 优势

  • 支持模块化（ES6、CommonJS、AMD 等）
  • 丰富的 Loader 和插件生态
  • 代码分割和懒加载，提高性能
  • 热模块替换（HMR）提升开发体验

好的！这里给你写一个React + Webpack的完整项目配置示例，包含基本的项目结构、webpack 配置、React 代码，以及常用 Loader 和 Plugin 的使用。

React + Webpack 示例项目配置

1. 项目目录结构

my-react-app/
├── package.json
├── webpack.config.js
├── /public
│   └── index.html
└── /src
    ├── index.js
    └── App.jsx

2. package.json（最简）

{
  "name": "my-react-app",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack serve --mode development --open",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^9.1.0",
    "css-loader": "^6.7.3",
    "style-loader": "^3.3.1",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  }
}

3. webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',       // 入口文件
  output: {
    filename: 'bundle.js',       // 输出文件
    path: path.resolve(__dirname, 'dist'),
    clean: true,                 // 构建时清理 dist 文件夹
  },
  resolve: {
    extensions: ['.js', '.jsx'], // 支持导入 jsx 文件不用写扩展名
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,     // babel 转译 js/jsx
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,          // 处理 css
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpg|gif|svg)$/,  // 处理图片
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',  // 生成 HTML 并自动引入 bundle.js
    }),
  ],
  devServer: {
    static: './dist',             // 本地服务器根目录
    hot: true,                   // 启用热模块替换(HMR)
    open: true,                  // 启动后自动打开浏览器
    port: 3000,
  },
};

4. Babel 配置（.babelrc）

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

5. /public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>React + Webpack Demo</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

6. /src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

7. /src/App.jsx

import React from 'react';
import './App.css';

export default function App() {
  return (
    <div className="app">
      <h1>Hello React + Webpack!</h1>
    </div>
  );
}

8. /src/index.css 和 App.css

你可以随意添加简单样式，比如：

/* index.css */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

/* App.css */
.app {
  text-align: center;
  margin-top: 50px;
}

9. 使用步骤

# 安装依赖
npm install

# 启动开发服务器（支持热更新）
npm start

# 打包生产环境代码
npm run build