webpack--Entry

webpack通过context和entry这两个配置来共同决定入口文件的路径。在配置入口实际上做了两件事儿：

• 确定入口模块位置，告诉webpack从哪里进行打包
• 定义chunk name.如果工程只有一个入口，那么默认其chunk name为“main”;如果工程有多个入口，我们需要为每个入口定义chunk name，来作为该chunk name的唯一标识

context

Webpack在寻找相对路径的文件时会以context为根目录.
context默认为执行启动Webpack时所在的当前工作目录.也可以在Webpack目录中进行配置

//例1
module.exports = {
    context:path.resolve(__dirname,'./src'),
    entry:'./scripts/index.js',    //<工程根目录>/src/scripts/index.js
}

//例2
module.exports = {
    context:path.resolve(__dirname,'./src/scrpts'),
    entry:'./index.js',    //<工程根目录>/src/scripts/index.js
}

Entry

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

entry不是必选项,其默认值为./src/index.js

entry的配置有多种形式:字符串,数组,对象,函数.可以根据不同的场景进行选择.

字符串

直接传入文件路径就可以

module.exports = {
    entry:'./src/index.js',
}

数组

传入一个数组的作用是将多个资源预先合并,在打包的时候Webpack会将数组中最后一个元素作为实际入口路径

module.exports = {
    entry:['babel-polyfill','./src/index.js'],
}

//等同于
module.exprots = {
    entry:'./src/index.js'
}
//index.js文件
import 'babel-polyfill'

对象

如果要实现多入口,则必须使用对象
对象的属性(key)是chunk name,属性值(value)是入口路径

module.exports = {
    entry:{
        //chunk name 为index,入口路径为 ./src/index.js
        index:'./src/index.js',
        //chunk name 为lib,入口路径为 ./src/lib.js
        lib:'./src/lib.js'
    }
}

对象属性值也可以为数组

module.exports = {
    entry:{
        //此处数组的功能跟entry值为数组时的功能一样--预合并
        index:['babel-polyfill','./src/index.js'],
        lib:'./src/lib.js'   
    }
}

函数

用函数定义入口时,只要返回上面介绍的任何配置形式即可

module.exports = {
    //返回字符串
    entry:() => './src/index.js',
    //返回对象
    entry:() => {
        index:'./src/index/.js',
        lib:'./src/lib.js',
    }
}

我们可以在函数里添加一些动态的逻辑获取工程入口.同时也支持返回一个Promise对象进行异步操作

module.exports = {
    entry:() => new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('./src/index.js');
        },1000)
    })
}

文章内容整理于:《深入浅出 Webpack》、《Webpack实战：入门、进阶与调优》与Webpack官网