Webpack 多页面打包配置详解-JavaScript中文网-JavaScript教程资源分享门户

随着前端工程化的发展，Webpack 已经逐渐成为前端项目构建工具的主流之一。在实际项目中，通常都有多个页面需要打包，这时候就需要使用 Webpack 的多页面打包功能。本文将详细介绍如何对 Webpack 进行多页面打包配置。

多页面打包的意义

对于一个前端项目来说，页面数量往往不止一个。为了提高前端代码的可维护性和可复用性，我们可以将每个页面打包成单独的 html 文件，并在 webpack 配置中针对每个页面进行单独的打包设置。这种做法可以达到如下目的：

方便代码管理：每个页面拆分为单独的文件，方便维护和版本控制。
加快页面加载速度：采用多页面打包方式，拆分成多个 js 文件，并行下载，从而减少页面加载时间。

多页面打包配置步骤

下面将介绍如何在 Webpack 中进行多页面打包配置，供大家在实际项目中参考。

步骤 1：基础配置

首先，我们需要安装 Webpack 和 HtmlWebpackPlugin：

npm  install  webpack  --save-dev
npm  install  html-webpack-plugin  --save-dev

然后，创建一个 webpack.common.js 文件，并添加以下配置：

// www.javascriptcn.com code example
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    page1: "./src/page1.js",
    page2: "./src/page2.js",
    page3: "./src/page3.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/page1.html",
      filename: "page1.html",
      chunks: ["page1"],
    }),
    new HtmlWebpackPlugin({
      template: "./src/page2.html",
      filename: "page2.html",
      chunks: ["page2"],
    }),
    new HtmlWebpackPlugin({
      template: "./src/page3.html",
      filename: "page3.html",
      chunks: ["page3"],
    }),
  ],
};

在这个配置中：

entry 指定了打包入口，所有需要打包的页面对应一个入口。
output 指定了打包输出的目录和文件名，其中 [name] 表示对应入口的文件名。
plugins 中使用了三个 HtmlWebpackPlugin，分别对应每个需要打包的页面。其中 template 指定了页面的模板文件， filename 指定了生成的 html 文件名， chunks 指定了当前页面需要打包的 js 文件。

步骤 2：开发环境配置

开发环境下，我们需要添加一些额外的配置，使得我们能够在本地进行调试。

创建一个 webpack.dev.js 文件，并添加以下配置：

// www.javascriptcn.com code example
const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common, {
  mode: "development",
  devServer: {
    contentBase: "./dist",
    port: 8080,
  },
  devtool: "source-map",
});

这个配置中：

mode 设置为 development 表示开发模式。
devServer 配置了本地服务器，其中 contentBase 指定了服务器读取的文件目录， port 指定了本地服务器端口。
devtool 配置了 source map，便于调试代码。

步骤 3：生产环境配置

在生产环境中，我们需要对输出的文件进行压缩和优化。

创建一个 webpack.prod.js 文件，并添加以下配置：

// www.javascriptcn.com code example
const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");
const TerserPlugin = require("terser-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = merge(common, {
  mode: "production",
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin(), new OptimizeCSSAssetsPlugin()],
  },
});

在这个配置中：

mode 设置为 production 表示生产模式。
optimization 配置了优化相关的参数，使用了 TerserPlugin 和 OptimizeCSSAssetsPlugin 对 js 和 css 文件进行压缩和优化。

步骤 4：打包

最后，我们可以通过运行以下命令对页面进行打包：

webpack --config webpack.prod.js

如果我们需要在本地进行调试，可以运行以下命令启动本地服务器：

webpack-dev-server --config webpack.dev.js

示例代码

上述操作的代码示例，可参考：https://github.com/hellojazzmine/webpack-multi-page-demo

结语

本文详细介绍了 Webpack 多页面打包的配置方法。通过多页面打包方式，我们可以简化前端项目开发、部署和维护流程。希望这篇文章可以帮助您在实际工作中更好地使用 Webpack。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d7cd71a941bf7134df71d9

Webpack 多页面打包配置详解