深入浅出webpack学习(2)--Entry

现在介绍一下webpack配置中的entry~

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'
        })
    })
}