webpack 入口 entry

webpack 是通过依赖关系，分析依赖来进来打包工作。那么，从哪里开始打包呢？ webpack 入口就是 webpack 的开始。

webpack 入口可以是：路径字符串，对象（chunk名与路径映射），更加复杂的对象（chunk名与需要映射的数组）:

string | [string], 字符串和字符串的数组
chunkName: string | [string] | {}
入口描述对象（从 webpack5 ）

本质：entry 是与 webpack 中的 chunk 有极大的关系。入口文件会形成 chunk(chunk 是快速分离的)。不同的入口方式，适用于不同的打包功能。

默认 webpack 配置

webpack 会将 index.js 及其依赖文件打包到一个 bundle 的 js 文件中。（上面有 chunk, 这个是 bundle，是 webpack 中的概念，最好是要理解，bundle webpack 打包输出文件）

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

这种默认的方式会形成一个名字为 main 的 chunk。如果我们要换一个入口 chunk 名字，此时就可以使用 entry 为对象形式, 下面是要求 chunk 名字是 index.

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

当然你也使用数组的方式：

很容易理解的就是，一个 chunk 里面包含哪些 module (注意：这里讲到了 module, 可以看出 chunk 是 module 的集合)

module.exports = {
    entry: ["./src/index.js", "./src/script1.js", "./src/script2.js"]
}

本质是：生成了默认的 main chunk，它包含了三个 module，也就是数组中的三个文件。多entry 对象数组也是如此:

module.exports = {
    entry: {
        a: ["./src/index.js", "./src/script1.js", "./src/script2.js"],
        b: ["./src/index.js", "./src/script1.js", "./src/script2.js"],
    }
}

此时 webpack 打包会生成 a, b 两个 chunk, 都包含了上面相同的三个文件，对象的配置方式，适用于对页面打包。

入口描述对象

module.exports = {
  entry: {
    a2: 'dependingfile.js',
    b2: {
      dependOn: 'a2',
      import: './src/app.js',
    },
  },
};

dependOn：当前入口点依赖的入口点。它们必须在加载此入口点之前加载。
filename: 指定磁盘上每个输出文件的名称。
import: 启动时加载的模块。
library：指定库选项以捆绑当前条目中的库。
runtime：运行时块的名称。设置后，将创建一个新的运行时块。false从 webpack 5.43.0开始，它可以设置为避免新的运行时块。
publicPath：在浏览器中引用此条目的输出文件时，为其指定公共 URL 地址。另见output.publicPath。

将库单独放置一个入口

本质就是多 chunk，而 vendor 就是 chunk 名字

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

多面

本质就是多 chunk，而 chunk 名字是 page对应的名

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js',
  },
};

可维护性

为什么才到入口就考虑可维护性？因为 webpack 配置，可能在很多项目中都有可能用到:

封装函数
webpackc-chain

封装函数，其实就是工厂模式，就不在复述了。

webpack-chain 增加入口

const MakeConfig = require('webpack-chain')
const config = new MakeConfig()

// 配置编译入口文件 
config.entry('main').add('./src/main.js') 

// 等同于以下 webpack 配置
module.exports = {
    entry: { main: [ './src/main.js' ] }
}

webpack 直接使用输入的方式配置，多chunk 入口中间需要调用 end 方法：

config.entry('main').end().entry('index')
// 等价于
{
  entry: {
    main: [],
    index: []
  }
}

小结

webpack 配置项目 entry 概念
webpack entry 可配置项
webpack chunk 与 entry 关系
简单提及了 chunk、module、bundle 三个概念
webpack 新增了入口描述
使用 webpack-chain
vendor chunk
多页面 chunk

webpack 详解之 entry