Webpack教程系列（三）：Webpack入口与出口配置详解

1. 入口（Entry）配置

入口是 Webpack 开始构建依赖图的起点。Webpack 会从入口文件开始，递归地分析所有依赖的模块。

1.1 单入口配置

最简单的配置方式是单入口，适用于小型项目或单页面应用（SPA）。

module.exports = {
  entry: './src/index.js', // 单入口
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  }
};

1.2 多入口配置

对于多页面应用（MPA）或需要拆分包的场景，可以使用多入口配置。

module.exports = {
  entry: {
    app: './src/app.js', // 入口 1
    admin: './src/admin.js' // 入口 2
  },
  output: {
    filename: '[name].bundle.js', // 使用 [name] 占位符
    path: __dirname + '/dist'
  }
};

• **[name]**：占位符，表示入口的名称（如 app 或 admin）。
• 打包后会生成两个文件：app.bundle.js 和 admin.bundle.js。

---

2. 出口（Output）配置

出口配置用于指定打包后文件的输出位置和命名规则。

2.1 基本配置

module.exports = {
  output: {
    path: __dirname + '/dist', // 输出目录
    filename: 'bundle.js' // 输出文件名
  }
};

2.2 动态文件名

通过占位符动态生成文件名，常用的占位符有：

• **[name]**：入口名称。
• **[hash]**：构建的哈希值（每次构建都会变化）。
• **[chunkhash]**：模块的哈希值（仅当模块内容变化时变化）。
• **[contenthash]**：文件内容的哈希值（推荐用于生产环境）。

module.exports = {
  output: {
    filename: '[name].[contenthash].js', // 示例：app.3e9f1.js
    path: __dirname + '/dist'
  }
};

2.3 公共路径（publicPath）

publicPath 用于指定资源文件的公共路径，通常用于 CDN 或静态资源服务器。

module.exports = {
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
    publicPath: '/assets/' // 资源文件路径为 /assets/bundle.js
  }
};

---

3. 多入口与多出口示例

以下是一个多入口与多出口的完整示例：

3.1 项目结构

webpack-demo/
├── src/
│   ├── app.js
│   ├── admin.js
│   └── utils.js
├── dist/
├── webpack.config.js
└── package.json

3.2 配置文件

const path = require('path');

module.exports = {
  entry: {
    app: './src/app.js', // 入口 1
    admin: './src/admin.js' // 入口 2
  },
  output: {
    filename: '[name].[contenthash].js', // 动态文件名
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/assets/' // 公共路径
  }
};

3.3 打包结果

运行 npx webpack 后，dist 目录下会生成以下文件：

• app.[contenthash].js
• admin.[contenthash].js

---

4. 常见问题与解决方案

4.1 如何清理旧的打包文件？

每次打包时，旧的打包文件可能会残留。可以使用 clean-webpack-plugin 插件自动清理 dist 目录。

npm install clean-webpack-plugin --save-dev

配置：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  plugins: [
    new CleanWebpackPlugin() // 清理 dist 目录
  ]
};

4.2 如何拆分公共代码？

如果多个入口文件依赖相同的模块，可以使用 SplitChunksPlugin 将公共代码提取到单独的文件中。

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all' // 提取所有公共模块
    }
  }
};

---

5. 总结

本文详细介绍了 Webpack 的入口与出口配置，包括单入口、多入口、动态文件名、公共路径等内容。通过合理的配置，我们可以更好地管理项目的打包输出。

在下一篇文章中，我们将深入探讨 Loader 的概念和用法，学习如何处理非 JavaScript 资源（如 CSS、图片等）。

---

预告：

• 下一篇：Webpack Loader 详解：处理 CSS、图片等资源

---