入口与上下文

webpackjsorg-main配置参考

入口与上下文

入口对象是 webpack 开始构建 bundle 的起点。上下文是一个绝对路径字符串，指向包含入口文件的目录。

context

string

解析配置中的入口点和 loader 的基本目录，必须是绝对路径。

js 复制代码

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  context: path.resolve(__dirname, "app"),
};

默认情况下，使用 Node.js 的当前工作目录，但建议在配置中传入一个值。这可以使你的配置独立于 CWD（当前工作目录）。

entry

string [string] object = { <key> string | [string] | object = { import string | [string], dependOn string | [string], filename string, layer string, runtime string | false }} (function() => string | [string] | object = { <key> string | [string] } | object = { import string | [string], dependOn string | [string], filename string, layer string, runtime string | false })

应用程序打包过程的起点或起点集合。如果传入数组，则所有项都会被处理。

动态加载的模块不是入口点。

一个值得考虑的规则：每个 HTML 页面对应一个入口点。SPA：一个入口点，MPA：多个入口点。

js 复制代码

export default {
  // ...
  entry: {
    home: "./home.js",
    about: "./about.js",
    contact: "./contact.js",
  },
};

命名

如果传入的是字符串或字符串数组，则 chunk 被命名为 main。如果传入的是对象，则每个键是一个 chunk 的名称，值描述该 chunk 的入口点。

入口描述符

如果传入对象，值可以是字符串、字符串数组或一个描述符：

js 复制代码

export default {
  // ...
  entry: {
    home: "./home.js",
    shared: ["react", "react-dom", "redux", "react-redux"],
    catalog: {
      import: "./catalog.js",
      filename: "pages/catalog.js",
      dependOn: "shared",
      chunkLoading: false, // 禁用按需加载的 chunk，将所有内容放入主 chunk 中。
    },
    personal: {
      import: "./personal.js",
      filename: "pages/personal.js",
      dependOn: "shared",
      chunkLoading: "jsonp",
      asyncChunks: true, // 创建按需加载的异步 chunk。
      layer: "name of layer", // 为入口点设置 layer
      worker: true, // 标记为 worker 入口，自 webpack 5.108.0 起可用
    },
  },
};

描述符语法可用于向入口点传递额外的选项。

T> worker 标志（自 webpack 5.108.0 起）将入口标记为 worker，因此其输出文件使用 output.workerChunkFilename 而不是常规的 chunk 文件名。webpack 会为从 new Worker(new URL(...)) 创建的入口自动设置此标志，因此你很少需要手动设置。

输出文件名

默认情况下，入口 chunk 的输出文件名取自 output.filename，但你可以为特定入口指定自定义输出文件名：

js 复制代码

export default {
  // ...
  entry: {
    app: "./app.js",
    home: { import: "./contact.js", filename: "pages/[name].js" },
    about: { import: "./about.js", filename: "pages/[name].js" },
  },
};

这里使用描述符语法为特定入口点传递 filename 选项。

依赖

默认情况下，每个入口 chunk 会存储它使用的所有模块。使用 dependOn 选项，你可以将一个入口 chunk 的模块共享给另一个：

js 复制代码

export default {
  // ...
  entry: {
    app: { import: "./app.js", dependOn: "react-vendors" },
    "react-vendors": ["react", "react-dom", "prop-types"],
  },
};

app chunk 将不包含 react-vendors 所拥有的模块。

dependOn 选项也可以接受字符串数组：

js 复制代码

export default {
  // ...
  entry: {
    moment: { import: "moment-mini", runtime: "runtime" },
    reactvendors: { import: ["react", "react-dom"], runtime: "runtime" },
    testapp: {
      import: "./wwwroot/component/TestApp.tsx",
      dependOn: ["reactvendors", "moment"],
    },
  },
};

此外，你可以使用数组为每个入口指定多个文件：

js 复制代码

export default {
  // ...
  entry: {
    app: { import: ["./app.js", "./app2.js"], dependOn: "react-vendors" },
    "react-vendors": ["react", "react-dom", "prop-types"],
  },
};

动态入口

如果传入函数，则每次 make 事件时都会调用它。

请注意，make 事件在 webpack 启动时触发，并且在监听文件变化时每次失效时也会触发。

js 复制代码

export default {
  // ...
  entry: () => "./demo",
};

或者

js 复制代码

export default {
  // ...
  entry: () =>
    new Promise((resolve) => {
      resolve(["./demo", "./demo2"]);
    }),
};

不同文件夹中的多个入口点

在某些场景下，你可能希望将入口点组织到不同的文件夹中，以获得更好的结构和可维护性。以下是如何定义位于不同文件夹中的多个入口点：

js 复制代码

export default {
  entry: {
    "/scriptFolder/one/app": "./src/one/app.js",
    "/scriptFolder/two/main": "./src/two/main.js",
  },
};

例如：你可以使用动态入口从外部来源（远程服务器、文件系统内容或数据库）获取实际的入口点：

webpack.config.js

js 复制代码

export default {
  entry() {
    return fetchPathsFromSomeExternalSource(); // 返回一个 promise，resolve 后的值类似于 ['src/main-layout.js', 'src/admin-layout.js']
  },
};

与 output.library 选项结合时：如果传入数组，则仅导出最后一项。

Runtime chunk

它可以为入口点设置 runtime chunk，并且自 webpack v5.43.0 起，可以将其设置为 false 以避免创建新的 runtime chunk。

optimization.runtimeChunk 可以为未指定的入口点全局设置它。

js 复制代码

export default {
  // ...
  entry: {
    home: {
      import: "./home.js",
      runtime: "home-runtime",
    },
    about: {
      import: "./about.js",
      runtime: false,
    },
  },
};

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。