深刻浅出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'
        })
    })
}