webpack的入口起点（EntryPoints）

单个入口(简写)语法

用法：

entry:string|Array<string>

举例：

webpack.config.js

const config = {

    entry: './path/to/my/entry/file.js'

};

module.exports = config;

T> 当你向 entry 传入一个数组时会发生什么？向 entry 属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。

传入数组这种方式有助于，在你想要多个依赖文件一起注入，并且将它们的依赖导向(graph)到一个“chunk”时。

当你正在寻找为「一个应用程序或只有一个入口起点的工具（即 library）」快速设置一个 webpack 配置的时候，这会是个很不错的选择。

但是，使用此语法扩展(extend or scale)配置没有太多的灵活性。

对象语法

用法：

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

webpack.config.js

const config = {

entry: {

app: './src/app.js',

vendors: './src/vendors.js'

}

};

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

T> “可扩展的 webpack 配置”是指，可重用并且可以与其他配置组合使用。这是一种流行的技术，用于将关注点(concern)从环境(environment)、构建目标(build target)、运行时(runtime)中分离。然后使用专门的工具（如 webpack-merge）将它们合并。

常见场景

以下列出入口配置和它们的实际用例：

分离 应用程序(app) 和 公共库(vendor) 入口

webpack.config.js

const config = {

  entry: {

    app: './src/app.js',

    vendors: './src/vendors.js'

  }

};

多个页面应用程序

webpack.config.js

 

const config = {

     entry: {  

        pageOne: './src/pageOne/index.js',   

        pageTwo: './src/pageTwo/index.js',   

        pageThree: './src/pageThree/index.js' 

}};