一、入口 （entry）

#.单个入口（简写/数组）语法

• 用法：entry: string | [string]

• 优缺点：通过一个入口（例如一个库）为应用程序设置 webpack 配置时，单一入口是不错的选择。然而，这种语法扩展配置的灵活性不大。

webpack.config.js

module.exports = {
    entry: {  
        main: './path/to/my/entry/file.js' 
    } 
}
// 或者，注入多个依赖文件，并将依赖关系绘制在一个“chunk”中
module.exports = {
    entry: ['./src/file_1.js','./src/file_2.js'],
    output: {
        filename: 'bundle.js'
    }
}

#.对象语法 ✔

• 用法：entry: { string | [string] } | { }

• 优缺点：对象语法会比较繁琐。然而，这是应用程序中定义入口的最可扩展的方式。

• 对象属性：

1. dependOn: 当前入口所依赖的入口。必须在该入口被加载前被加载。
2. filename: 指定要输出的文件名称。
3. import: 启动时需加载的模块。
4. library: library 的相关选项。
5. runtime: 运行时 chunk 的名字。如果设置了，就会创建一个以这个名字命名的运行时 chunk，否则将使用现有的入口作为运行时。

• 注意事项：

1. runtime 和 dependOn 不能在同一个入口上同时使用
2. 确保 runtime 不能指向已存在的入口名称
3. dependOn 不能循环引用

// ✔
module.exports = {
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js',
  },
};

// ✔
module.exports = {
  entry: {
    a2: 'dependingfile.js',
    b2: {
      dependOn: 'a2',
      import: './src/app.js',
    },
  },
};

// ×  `runtime` 和 `dependOn` 不能在同一个入口上同时使用
module.exports = {
  entry: {
    a2: './a',
    b2: {
      runtime: 'x2',
      dependOn: 'a2',
      import: './b',
    },
  },
};

// × `runtime` 不能指向已存在的入口名称
module.exports = {
  entry: {
    a1: './a',
    b1: {
      runtime: 'a1',
      import: './b',
    },
  },
};

// × `dependOn` 不能循环引用
module.exports = {
  entry: {
    a3: {
      import: './a',
      dependOn: 'b3',
    },
    b3: {
      import: './b',
      dependOn: 'a3',
    },
  },
};

二、常见场景

#.分离 app(应用程序) 和 vendor(第三方库) 入口

// 使用 optimization.splitChunks 默认配置
// webpack.config.js
module.exports = {
  entry: {
    main: './src/app.js'
   },
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      minRemainingSize: 0,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

#.多页面应用程序

// webpack.config.js
module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js',
  },
};