Webpack 的核心架构围绕以下五个关键概念构建，理解这些概念是掌握 Webpack 的基础：

入口 Entry

作用

指定 Webpack 从哪个文件开始构建依赖关系图。

特点

• 可以有一个或多个入口点
• 单页应用通常只有一个入口，多页应用会有多个入口
• 默认入口是 ./src/index.js

示例配置

module.exports = {
  entry: './path/to/my/entry/file.js'
  // 或
  entry: {
    app: './src/app.js',
    admin: './src/admin.js'
  }
};

输出 Output

作用

告诉 Webpack 在哪里输出它创建的 bundles 以及如何命名这些文件。

特点

• 主要输出配置是 filename 和 path
• 可以包含占位符如 [name]、[hash] 等
• 默认输出到 ./dist/main.js

示例配置

const path = require("path");

module.exports = {
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
    clean: true, // 清理输出目录
  },
};

加载器 Loaders

作用

让 Webpack 能够处理非 JavaScript 文件。

特点

• 在 module.rules 中配置
• 从右到左/从下到上执行
• 每个 loader 都是一个函数，接收源文件内容，返回转换后的内容

常见 Loaders

• babel-loader：转换 ES6+ 代码
• css-loader：处理 CSS 文件
• file-loader：处理图片等资源文件
• ts-loader：处理 TypeScript

示例配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
    ],
  },
};

插件 Plugins

作用

执行范围更广的任务，从打包优化到资源管理。

特点

• 比 Loaders 更强大，可以介入打包过程的各个阶段
• 需要通过 new 操作符创建实例
• 一个插件可以在配置中多次使用

常用插件

• HtmlWebpackPlugin：生成 HTML 文件
• CleanWebpackPlugin：清理构建目录
• MiniCssExtractPlugin：提取 CSS 到单独文件
• BundleAnalyzerPlugin：分析包内容

示例配置

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      title: "My App",
      template: "./src/index.html",
    }),
  ],
};

模式 Mode

作用

设置开发或生产环境，启用相应的内置优化。

特点

• 三种模式：development、production 或 none
• 影响 Webpack 的内置优化策略
• 可以通过 process.env.NODE_ENV 获取当前模式

模式对比

特性	development	production
代码压缩	否	是
调试工具	包含	移除
构建速度	快	慢
输出文件大小	大	小

示例配置

module.exports = {
  mode: "production",
  // 或
  // mode: 'development'
};

理解这五大核心概念后，您就能根据项目需求灵活配置 Webpack，实现高效的模块打包和资源管理。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24