Webpack入口配置详解与优化实践

1. Webpack entry基础概念解析

Webpack作为现代前端工程化的核心工具，entry配置项决定了打包的起点和依赖图的构建方式。在实际项目中，entry的配置直接影响着最终产物的结构和性能表现。

entry本质上是一个模块依赖图的入口节点。当Webpack处理应用程序时，它会从entry开始递归构建依赖图。这个过程中，每个被entry直接或间接依赖的模块都会被加入到依赖图中。

entry配置支持三种基础格式：

• 字符串格式：entry: './src/index.js'
• 数组格式：entry: ['./src/polyfill.js', './src/index.js']
• 对象格式：entry: { app: './src/app.js', admin: './src/admin.js' }

注意：数组格式的entry会合并到同一个chunk中，而对象格式会生成独立的chunk。这是很多开发者容易混淆的点。

2. entry配置的进阶用法

2.1 动态entry配置

在实际企业级项目中，entry往往需要根据环境动态生成。我们可以通过函数形式实现动态entry：

javascript复制entry: () => {
  const entries = {};
  // 根据环境变量动态添加entry
  if (process.env.NODE_ENV === 'development') {
    entries.devOnly = './src/dev-entry.js';
  }
  entries.main = './src/main.js';
  return entries;
}

这种模式特别适合需要根据不同部署环境（测试、预发、生产）生成不同entry的场景。

2.2 多页面应用的entry配置

对于传统的多页面应用(MPA)，entry配置需要配合html-webpack-plugin使用：

javascript复制entry: {
  page1: {
    import: './src/page1.js',
    dependOn: 'shared',
  },
  page2: {
    import: './src/page2.