webpack—— 多页开发配置-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，Webpack 已经成为了一个不可或缺的工具，特别是在构建单页面应用（SPA）方面。但是当我们需要开发多页应用（MPA）时，Webpack 的配置就显得有些复杂，需要考虑许多因素，例如如何管理多个页面入口、如何进行代码分割等等。本文将为读者详细介绍如何在 Webpack 中配置多页开发，并提供示例代码。

多页开发概述

首先，我们需要理解什么是多页开发（MPA）。与 SPA 不同，MPA 是一种传统的 Web 应用开发方式，每一个页面都有自己的独立 HTML、CSS 和 JavaScript 文件。

在 MPA 中，每一个页面都是独立的，有自己的 URL 和导航。因此，我们需要为每个页面创建一个独立的入口文件，并在页面加载时引入对应的 CSS 和 JavaScript 文件。

示例目录结构：

// javascriptcn.com 代码示例
├── dist/
├── src/
│   ├── index/
│   │   ├── index.html
│   │   ├── index.js
│   │   └── index.css
│   ├── about/
│   │   ├── about.html
│   │   ├── about.js
│   │   └── about.css
│   └── common/
│       ├── common.js
│       └── common.css
├── package.json
└── webpack.config.js

dist/: Webpack 打包后的目录，存放所有打包后的文件。
src/: 源代码目录，包含多个页面代码。
src/index/: 首页目录，包含 HTML、CSS 和 JavaScript 文件。
src/about/: 关于我们页面目录，包含 HTML、CSS 和 JavaScript 文件。
src/common/: 公用资源目录，包含公用 CSS 和 JavaScript 文件。
package.json: 项目配置文件。
webpack.config.js: Webpack 配置文件。

Webpack 多页应用配置

在多页开发中，我们需要通过 Webpack 的多入口配置来处理多个文件。

在 webpack.config.js 中，我们可以进行如下配置：

// javascriptcn.com 代码示例
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index/index.js',
    about: './src/about/about.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index/index.html',
      chunks: ['index', 'common'],
    }),
    new HtmlWebpackPlugin({
      filename: 'about.html',
      template: './src/about/about.html',
      chunks: ['about', 'common'],
    }),
  ],
};

其中，entry 属性表示多个入口文件，output 属性表示打包输出目录和文件名。HtmlWebpackPlugin 是一个用于生成 HTML 文件的插件，其中 chunks 属性定义了所需要引用的 JavaScript 文件，filename 属性表示生成后的文件名，template 属性表示生成的 HTML 文件使用的模板。

需要注意的是，由于我们需要为每个页面都生成独立的 HTML 文件和对应的 JavaScript 文件，所以我们需要为配置添加多个 HtmlWebpackPlugin 插件。

CSS 文件打包

在这个项目中，我们使用了多个 CSS 文件。然而，Webpack 默认并不支持多个 CSS 文件合并打包。为了使多个 CSS 文件合并打包，我们需要使用 mini-css-extract-plugin 插件。

我们可以在 webpack.config.js 中进行如下配置：

// javascriptcn.com 代码示例
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
};

其中，rules 属性中使用了 css-loader 来处理 CSS 文件，而 MiniCssExtractPlugin 插件则可以将多个 CSS 文件合并打包。我们通过设置 filename 属性指定合并后的 CSS 文件名。

代码分割

代码分割可以帮助我们将 JavaScript 代码分成更小的块，以便更好地管理，同时提高页面加载速度。我们可以使用 optimization 属性配置 Webpack 代码分割。

// javascriptcn.com 代码示例
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: 'common',
    },
  },
};

以上代码表示通过 splitChunks 配置将入口文件中的公用代码提取为 common 文件。

总结

本文介绍了如何在 Webpack 中处理多页开发，并提供了示例代码。通过理解多页应用的概念，我们可以更好地管理和开发多个页面应用。同时，Webpack 提供的多入口、插件和代码分割功能可以更好地处理多页应用的开发和优化。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653f40e97d4982a6eb8c8b1d