webpack 入口

单个入口（简写）语法

用法: entry: string | [Stirng]

// webpack.config,js
module,exports = {
    entry: './path/to/entry/file.js'
}

entry属性的单个入口语法，是以下形式的简写：

// webpack.config.js
module.exports = {
    entry: {
        main: './path/to/entry/file.js'
    }
}

我们也可以将一个文件路径数组传递给entry属性，这将创建一个所谓的"multi-main entry"。在你想要一次注入多个依赖文件，并且将他们的依赖关系绘制在一个“chunk”中时，这个方式就很有用。

//webpack.config.js
module.exports = {
    entry: ['./src/file_1.js', './src/file_2.js'],
    output: {
        filename: 'bundle.js'
    }
}

当你希望通过一个入口（例如一个库）为应用程序或工具快速设置webpack配置时，单一入口的语法是不错的选择。然而，使用这种语法方式来扩展或调整配置的灵活性不大

对象语法

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

// webpack.congfig.js
module.exports = {
    entry: {
        app: './src/app.js',
        adminApp: './src/adminApp.js'
    }
}

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

描述入口的对象

用于描述入口的对象。你可以使用如下属性：

• dependOn: 当前入口依赖的入口。他们必须字啊该入口被加载前被加载

• fileName: 指定要输出的文件名称

• import: 启动时需加载的模块

• library: 指定library选项，为当前entry构建一个library

• runtime: 运行时chunk的名字。如果设置了，就会创建一个新的运行时chunk. 在webpack5.43.0之后可将其设为false以避免一个新的运行时chunk.

• publicPath: 当该入口的输出文件在浏览器中被引用时，为他们指定一个公共的URL地址。

  // webpack.config.js
  module.export = {
      entry: {
          a2: 'dependingfile.js',
          b2:{
              dependOn: 'a2',
              import: './src/app.js'
          }
      }
  }

runtime和dependOn不应在同一入口上同时使用，所以如下配置无效，并且会抛出错误：

// webpack.config.js
module.exports = {
    entry: {
        a2: './a',
        b2: {
            runtime: 'x2',
            dependOn: "a2",
            import: './b'
        }
    }
}

确保runtime不能指向已经存在的入口名称，例如下面配置会抛出一个错误：

// webpack.config.js
module.exports = {
    entry: {
        a1: './a',
        b1: {
            runtime: 'a1',
            import: './b'
        }
    }
}

另外depnedOn不能是循环引用的，下面的例子也会出现错误：

// webpack.config.js
module.exports = {
    entry: {
        a3: {
            import: './a',
            dependOn: 'b3'
        },
        b3:{
            import: './b',
            dependOn: 'a3'
        }
    }
}

常见场景

一下列出一些入口为配置和他们的实际用例：

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

// webpack.config.js
module.exports ={
    entry: {
        main: './src/app.js',
        vendor: './src/vendor.js'
    }
}

// webpack.prod.js
module.exports = {
    output: {
        filename: '[name].[contenthash].bundle.js'
    }
}

// webpack.dev.js
module.exports = {
    output: {
        filename: '[name].bundle.js'
    }
}

这是什么？这是告诉webpack我们想要配置2个单独的入口点（例如上面的示例）

为什么？这样你就可以在vendor.js中存入未做修改的必要library或文件（例如Bootstrap,jQuery,图片等），让然后将他们打包在一起成为单独的chunk. 内容哈希保持变，这使浏览器可以独立的缓存他们，从而减少 了加载时间

多页面应用程序

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

这是什么？我们告诉webpack需要三个独立分离的依赖图（如上面的示例）

为什么？在多页面应用程序中，server会拉取一个新的HTML文档给你的客户端。在页面重新加载此新文档，并且资源被重新下载。然而，这给了我们特殊的机会去做很多是，例如使用optomization.splitChunks为页面间共享的应用程序代码创建bundle. 由于入口起点数量的增多，多页面应用能够复用多个入口起点之间的大量代码/模块。从而可以极大的从这些技术中