Webpack 3.x 实现多页面打包的实用方法

简介

在前端开发中，我们通常不仅仅构建一个页面。为提升开发效率，借助 Webpack 可以高效打包多个页面资源。本篇将介绍如何通过 Webpack 3.x 版本实现多页面打包配置。

单页面打包

打包单页面相对简单，只需配置 entry 入口和 HtmlWebpackPlugin 插件。以下是单页面打包的代码示例：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const config = {
  entry: {
    index: './src/index.js',
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'js/index.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html',
      hash: true,
      minify: {
        removeAttributeQuotes: true,
        removeComments: true,
        collapseWhitespace: true,
      }
    }),
  ],
};

在该配置中，将 index.js 设置为入口文件，并通过 HtmlWebpackPlugin 生成包含脚本的 index.html 文件。

多页面打包

对于多个页面的项目，我们为每个页面设置对应的 entry 和 output。假设我们有两个页面 index 和 info，可以按如下方式进行配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const config = {
  entry: {
    index: './src/index.js',
    info: './src/info.js',
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'js/[name].js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html',
      chunks: ['index'],
      hash: true,
      minify: {
        removeAttributeQuotes: true,
        removeComments: true,
        collapseWhitespace: true,
      }
    }),
    new HtmlWebpackPlugin({
      filename: 'info.html',
      template: './src/info.html',
      chunks: ['info'],
      hash: true,
      minify: {
        removeAttributeQuotes: true,
        removeComments: true,
        collapseWhitespace: true,
      }
    }),
  ],
};

这里 output.filename 使用了 [name] 动态生成文件名。在 HtmlWebpackPlugin 中，通过 chunks 指定包含的 JavaScript 模块。

优化多页面配置

若页面数量较多，可借助 glob 库动态获取文件路径，简化配置：

function getView(globPath, flag) {
  let files = glob.sync(globPath);
  let entries = {};
  files.forEach((item) => {
    entry = item; // 处理文件路径逻辑
  });
  let htmlWebpackPluginConfigs = files.map((file) => {
    // 创建配置对象
  });
  return htmlWebpackPluginConfigs;
}

let htmlWebpackPluginConfigs = getView('./src/*.html', 'html');
config.plugins = [
  ...htmlWebpackPluginConfigs,
];

使用 glob 自动化处理多个页面的打包配置，简化了工作流程并提升开发效率。

总结

Webpack 3.x 通过配置入口和 HtmlWebpackPlugin 实现多页面打包，结合 glob 可进一步优化，轻松实现多页面应用打包需求。