entry

webpack5

webpack 的运行逻辑是从 entry 指定的入口文件开始，递归加载、构建项目资源。

entry 支持以下类型字段：

• string：指定入口文件路径；
• object：除了指定入口文件列表外，还可以指定入口依赖、Runtime 打包方式等；
• array：指明多个入口文件，可以是 string/object/function 类型，每个 entry 打一个 bundle；
• function：动态生成 entry 配置，可以返回 string/object/array 类型；

例如对象类型：

module.exports = {
    // ...
    entry: {
        // string
        home: './home.js',
        // array
        shared: ['react', 'react-dom', 'redux', 'react-redux'],
        // object
        personal: {
            import: './person.js',
            filename: 'pages/personal.js',
            dependOn: 'shared',
            chunkLoading: 'jsonp',
            asyncChunks: true
        },
        // function
        admin: function() {
            return './admin.js';
        }
    }
}

对象类型配置中最为复杂，支持以下属性：

• import：声明入口文件，可以是字符串单入口/数组多入口；
• dependOn：这个入口加载时的前置依赖 bundle，会认为 dependOn 指向的 entry 的 bundle 是当前 bundle 的依赖模块，从而把 dependOn 包含的代码剔除；
• runtime：设置 Runtime Chunk，若有这个设置，webpack 会把该入口的运行时代码抽成单独的 bundle；
• filename：产物路径；
• library：声明该入口的 output.library（构建 npm library 时使用）；
• publicPath：声明该入口文件的服务器路径；
• chunkLoading：效果和 output.chunkLoading 相同，声明异步模块加载的方案，支持 false/jsonp/require/import 等值；
• asyncChunks：效果和 output.asyncChunks 相同，声明是否支持异步模块加载，默认 true。

chunk 依赖管理

使用 entry.dependOn 声明入口依赖 bundle

dependOn 属性声明前置 bundle 依赖，能够减少重复代码构建，优化构建产物质量：

const path = require("path");
module.exports = {
  mode: "development",
  devtool: false,
  entry: {
    main: "./src/index.js",
    foo: { 
        import: "./src/foo.js", 
        // 避免重复 bundle 代码
        dependOn: "main" 
    },
  },
  output: {
    clean: true,
    filename: "[name].js",
    path: path.resolve(__dirname, "dist"),
  },
}

foo entry 声明了 dependOn 为 main entry 的构建产物，webpck 会认为 client 在加载 foo 的 bundle 之前必然会加载 main，因此可以将重复的模块代码、webpack 运行时代码都放到 main 的 bundle 中，减少不必要的重复；

dependOn 适用于有明确入口依赖的场景，例如主框架 bundle 包含了项目的基本框架（例如 React），还另外对每个页面单独构建了 bundle（不需要独立运行），此时可以用 dependOn 属性优化产物内容。

使用 entry.runtime 管理 webpack 的运行时代码

为了支持 bundle 代码在各种环境下运行，webpack 会在产物中注入一系列运行时代码，取决于我们用到了多少特性，例如：

• 需要导入导出模块时，注入 __webpack_require__.r 等；
• 需要异步加载时，注入 __webpack_require__.1 等；

runtime 声明把当前 entry 的 bundle 的运行时代码抽成单独的一个 chunk，多个 entry 声明同样的 entry 可以把两个入口的运行时代码抽到同一个单独的 chunk 里：

const path = require("path");
module.exports = {
  mode: "development",
  devtool: false,
  entry: {
    main: { import: "./src/index.js", runtime: "common-runtime" },
    foo: { import: "./src/foo.js", runtime: "common-runtime" },
  },
  output: {
    clean: true,
    filename: "[name].js",
    path: path.resolve(__dirname, "dist"),
  },
};

这里把 main 和 foo entry 的运行时代码都抽到 common-runtime 文件里。