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
    }),],
};