webpack入口的写法

在 Webpack 中，入口（entry）决定了构建的起点。Webpack 支持 单入口 和 多入口，具体如何配置如下：

1. 单入口配置

适用于 单页面应用（SPA），即 Webpack 只从一个文件开始解析。

单入口时，值为字符串，也可以是字符串数组

const path = require("path");

module.exports = {
  entry: "./src/index.js",  // 单入口
  output: {
    filename: "bundle.js",  // 打包后的文件名
    path: path.resolve(__dirname, "dist"),  // 输出目录
  },
  mode: "development"
};

2. 多入口配置

适用于 多页面应用（MPA），每个页面都有独立的 JS 入口。

多入口时entry的值必须是一个对象，通常多入口会对应多个 HTML 文件，可以使用 html-webpack-plugin 生成。

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    home: "./src/home.js",
    about: "./src/about.js",
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  mode: "development",
  plugins: [
    new HtmlWebpackPlugin({
      filename: "home.html",
      template: "./src/home.html",
      chunks: ["home"] // 只引入 home.bundle.js
    }),
    new HtmlWebpackPlugin({
      filename: "about.html",
      template: "./src/about.html",
      chunks: ["about"] // 只引入 about.bundle.js
    }),
  ],
};