webpack 配置之 入口起点 entry 和上下文 context

context 上下文

context 是 webpack 编译时的基础目录，是一个绝对路径的字符串。

Webpack 设置 context 默认值源码为：

this.set("context", process.cwd());

process.cwd()即 Webpack 运行所在的目录（等同于 webpack.config.js 所在目录）。

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

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

还可以通过在启动 Webpack 时带上参数 webpack --context 来设置 context。

如果有如下目录结构的项目

webpack-path
    |-- context
        |-- webpack.config.js
        |-- src
            |-- admin    
            |-- web
                |-- main.js

context 和 entry 的配置关系如下。

{
    context: path.resolve(__dirname, './src/'),
    entry: './web/main.js'
}
{
    context: path.resolve(__dirname, './src/web'),
    entry: './main.js'
}
{
    context: path.resolve(__dirname, './src/admin'),
    entry: '../web/main.js'
}

充分的说明，一旦配置了 context，那么在配置 entry 的时候，就需要相对于 context 配置的路径去设置。

这样有个好外是配置可以独立于工程目录 。例如在分离开发和生产配置文件的时候，一般把 webpack.config.js 放到 build 文件夹下，此时 entry 却不用考虑相对于 build 目录来配置，只需根据 context 的配置来设置。

这只对相对路径起作用，如果entry 配置为绝对路径，则和 context 没关系。另外 output 的配置项和 context 也没有关系，但是有些插件的配置项和 context 有关，这需要小心。

entry 入口起点

虽然 webpack4 中不是必须配置 entry ，但 entry 是 webpack 必不可少的，只是 webpack4 为其指定了一个默认值：./src/index.js。

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

entry 的类型可以是以下三种中的一种或者相互组合：

entry: "xxx", // string | object | array

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

webpack 中 Chunk 实际上就是输出的 .js 文件，可能包含多个模块，主要的作用是为了优化异步加载

对于同步的情况，一个 Chunk 会递归的把模块中所有的依赖都加入到 Chunk 中。

对于异步的情况，在每一个 split point 上所有依赖的模块会打包进一个新的 chunk，和同步一样，依赖也是递归的，如果子模块依赖其他模块也会加入到 chunk 中，依赖的回调函数中 require 的其他模块也会打包进 chunk 中，以下公式表示 chunk 内容：

chunk content = recursive(ensure 依赖) + recursive(callback 依赖)