[webpack4] 入口起点(entry points)

入口起点(entry points)

源文链接：入口起点(entry points)

正如我们在起步中提到的，在 webpack 配置中有多种方式定义 entry 属性。除了解释为什么它可能非常有用，我们还将向你展示如何去配置entry属性

单个入口(简写)语法

用法：entry: string | Array<string>

webpack.config.js

const config = {
	entry: './path/to/my/entry/file.js'
};

module.exports = config;

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

const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

当你向entry传入一个数组时会发生什么？向entry属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入，并且将它们的依赖导向(graph)到一个"chunk"时，传入数组的方式就很有用。

当你正在寻找为「只有一个入口起点的应用程序或工具(即 library)」快速设置 webpack 配置的时候，这会是个很不错的选择。然而，使用此语法在扩展配置时有失灵活性。

对象语法

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

webpack.config.js

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

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

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

常见场景

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

const path = require('path');


const config = {
    mode: "development",
    entry: {
        app: './index.js',
        lib: ['./jquery']
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name]_bundle.js',
    }
};

module.exports = config;

多页面应用程序

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