Webpack 入口 entry

Question

项目的打包入口，默认值是 ./src/index.js ，可指定一个（或多个）不同的入口起点。

• 如果传入一个字符串或字符串数组，chunk 会被命名为 main 。
• 如果传入一个对象，则每个键(key) 会是 chunk 的名称，该值描述了 chunk 的入口起点。

单个入口写法

用法： entry: string|Array<string>

module.exports = {
  entry: './path/to/my/entry/file.js'
  # 或者
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

对象写法（多入口)

用法： entry: {[entryChunkName: string]: string|Array<string>}

module.exports = {
  entry: {
    # 多页面应用程序，告诉 webpack 需要三个独立分离的依赖图
    app: './src/app.js',
    adminApp: './src/adminApp.js'
  }
};

在多页面应用程序中，服务器会传输一个新的 HTML 文档给你的客户端。页面重新加载此新文档，并且资源被重新下载。然而，这给了我们特殊的机会去做很多事：

• 使用 optimization.splitChunks 为页面间共享的应用程序代码创建 bundle。由于入口起点增多，多页应用能够复用入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益。

根据经验：每个 HTML 文档只使用一个入口起点。