如何用Webpack拆分HTML项目代码并解决热更新失效问题？

问题背景 #

使用Webpack搭配Tailwind搭建HTML项目时，需要拆分header、footer这类重复代码以避免复制粘贴，但使用html-webpack-simple-include-plugin时，修改拆分后的组件文件无法实时更新，必须重启服务器才能生效。

可行解决方案 #

方案一：利用html-webpack-plugin原生EJS模板能力 #

html-webpack-plugin本身支持EJS模板语法，无需额外插件即可实现组件拆分，且天然支持热更新。

1. 修改模板文件后缀：将原有HTML模板（如index.html、about.html）改为.ejs后缀。
2. 在模板中引入公共组件：使用EJS的include语法插入header和footer：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<body>
  <% include ./partials/header.html %>
  
  <!-- 页面自定义内容 -->

  <% include ./partials/footer.html %>
</body>
</html>

3. 更新Webpack配置：修改HtmlWebpackPlugin的模板路径为.ejs文件，并移除HtmlWebpackSimpleIncludePlugin相关配置：

// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");

// 保留其他配置，修改HtmlWebpackPlugin部分
plugins: [
  // ...其他插件
  new HtmlWebpackPlugin({
    template: "src/index.ejs",
    filename: "index.html",
    hash: true,
  }),
  new HtmlWebpackPlugin({
    filename: "about.html", 
    template: "src/about.ejs", 
    hash: true,
  }),
  // 移除HtmlWebpackSimpleIncludePlugin相关代码
]

修改公共组件文件时，devServer会自动监听变化并触发热更新。

方案二：使用webpack-html-plugin-include插件 #

该插件专门针对HTML片段引入场景，支持文件监听和热更新，配置简洁。

1. 安装插件：

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

2. 在HTML模板中使用自定义标签引入组件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<body>
  <include src="./partials/header.html"></include>
  
  <!-- 页面自定义内容 -->

  <include src="./partials/footer.html"></include>
</body>
</html>

3. 更新Webpack配置：替换原有插件为webpack-html-plugin-include：

// webpack.config.js
const HtmlIncludePlugin = require('webpack-html-plugin-include');
const HtmlWebpackPlugin = require("html-webpack-plugin");

plugins: [
  // ...其他插件
  new HtmlWebpackPlugin({
    template: "src/index.html",
    hash: true,
  }),
  new HtmlWebpackPlugin({
    filename: "about.html", 
    template: "src/about.html", 
    hash: true,
  }),
  new HtmlIncludePlugin(), // 添加此插件
  // 移除HtmlWebpackSimpleIncludePlugin相关代码
]

插件会自动监听引入的片段文件变化，触发HTML重新编译并实现热更新。

方案三：原生JS动态加载（非SSR场景适用） #

无需修改模板文件，通过入口JS动态加载公共组件，适合小型项目。

1. 在入口JS中添加加载逻辑：

// src/index.js
// 加载header
fetch('./partials/header.html')
  .then(res => res.text())
  .then(html => document.body.insertAdjacentHTML('afterbegin', html));

// 加载footer
fetch('./partials/footer.html')
  .then(res => res.text())
  .then(html => document.body.insertAdjacentHTML('beforeend', html));

2. 更新CopyPlugin配置：将partials目录复制到dist目录：

// webpack.config.js
new CopyPlugin({
  patterns: [
    { from: "src/assets", to: "assets" },
    { from: "src/partials", to: "partials" } // 添加此行
  ],
}),

注意：此方法会有首次加载的短暂组件延迟，但无需修改模板结构。

内容的提问来源于stack exchange，提问作者Mohammad Sakib