webpack--Entry

首先说下为啥需要Entry。这跟webpack的构建机制有关系，webpack跟其他不同的是，webpack是模块打包器。把一切的资源，无论是js、css之类的代码资源，还是图片、字体等的非代码资源，它们都是一个个的模块，它们之间存在依赖关系的，因此根据入口文件去找依赖。入口文件的依赖也有可能有依赖，存在一个依赖树。遍历完这个依赖树之后去生成打包的资源。

Entry

entry是配置模块的入口，可以抽象成输入，webpack执行构建的第一步将从入口开始搜寻及递归解析出所有入口依赖的模块。

注意： entry是必填，若不填写则将导致webpack报错退出

context

webpack在寻找相对路径的文件时会以context为根目录，context默认为执行启动webpack时所在的当前工作目录。如果想改变context的默认配置，则可以在配置文件中这样设置：

module.exports = {
    context: path.resolve(__dirname, 'app')
}

注意：context必须是一个绝对路径的字符串，除此之外，还可以通过在启动webpack时带上参数webpack --context 来设置context。

entry的路径和其他依赖的模块的路径可能采用相对于context的路径来描述，context会影响到这些相对路径所指向的真实文件。

Entry类型

• string类型

格式：
entry: './app/entry'

表示入口模块的文件路径，可以是相对路径。

• array类型

格式：
entry: ['./app/entry1', './app/entry2']

表示入口模块的文件路径，可以是相对路径。

• object类型

格式：
entry: {
    a: './app/entry-a',
    b: ['./app/entry-b1', './app/entry-b2']
}

配置多个入口，每个入口生成一个Chunk。

如果是array类型，则搭配output.library配置项使用时，只有数组里的最后一个入口文件会被导出。

Chunk名称

webpack会为每个生成的Chunk取一个名称，Chunk的名称和Entry的配置有关：

1. 如果entry是一个string或者array，就只会生成一个chunk，这个chunk的名称是main;
2. 如果entry是一个object，就可能出现多个chunk，这时chunk的名称是object键值对里键的名称。

配置动态Entry

假如项目里有多个页面需要为每个页面的入口配置一个entry，但这些页面数量可能会不断增长，这时entry的配置会受到其他因素的影响导致不能写成静态的值。解决办法就是把entry设置成一个函数去动态返回上面所说的配置：

 

//同步函数
entry: () => {
    return {
        a: './pages/a',
        b: './pages/b'
    }
}

//异步函数
entry: () => {
    return new Promise((resolve) => {
        resolve({
            a: './pages/a',
            b: './pages/b'
        })
    })
}