如何通过Webpack实现多HTML页面复用静态Footer？

Absolutely! This is a common static site development need, and Webpack can handle it perfectly with a straightforward setup. Here's a step-by-step solution that matches your exact requirements:

Step 1: Install Required Dependencies #

First, add Webpack core tools and HTML processing plugins/loaders:

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

Step 2: Project Structure #

Keep your files organized like this (adjust paths if needed):

your-project/
├── src/
│   ├── templates/
│   │   └── myfooter.html
│   ├── views/
│   │   └── index.html
│   └── js/
│       └── scripts.js
├── webpack.config.js
└── package.json

Step 3: Configure Webpack (webpack.config.js) #

This config tells Webpack how to process HTML files and inject your footer template:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // Entry point for JavaScript (required even if your scripts are empty)
  entry: './src/js/scripts.js',
  output: {
    filename: 'js/scripts.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true // Automatically clean the dist folder on each build
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              interpolate: true, // Enable template interpolation for require() calls
              esModule: false // Avoid needing .default when importing HTML files
            }
          }
        ]
      }
    ]
  },
  plugins: [
    // Process your index.html file
    new HtmlWebpackPlugin({
      template: './src/views/index.html',
      filename: 'index.html'
    })
    // Add more HtmlWebpackPlugin instances here for your other 19 pages!
    // Example:
    // new HtmlWebpackPlugin({
    //   template: './src/views/about.html',
    //   filename: 'about.html'
    // })
  ]
};

Step 4: Update Your View File (src/views/index.html) #

Replace the <myfooter></myfooter> placeholder with a require statement that pulls in your footer template:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
  <link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
  <!-- Replace <myfooter></myfooter> with this line -->
  <%= require('../templates/myfooter.html') %>
  <script src="js/scripts.js"></script>
</body>
</html>

Step 5: Add Build Scripts to package.json #

Add these scripts to easily run your Webpack builds:

"scripts": {
  "build": "webpack --mode production",
  "dev": "webpack --mode development"
}

Step 6: Run the Build #

Execute the production build command:

npm run build

Result #

Your dist/index.html will have the static footer HTML injected exactly where you placed the require statement, matching the example you provided. For your 19 other pages, simply duplicate the HtmlWebpackPlugin entry in the config and update the template/filename paths—all of them can reuse the same myfooter.html file.

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