如何在Webpack中配置Loader？并实现公共HTML文件引入？

Hey there! Let's get those shared header and footer HTML files integrated into your Webpack setup smoothly. The old SSI <!--#include--> syntax works for Grunt because it relies on server-side processing, but Webpack needs a loader to parse those includes during bundling. Here are two solid solutions based on your existing attempt with html-loader:

Solution 1: Use html-loader with interpolation #

This lets you use require() directly in your HTML file to pull in shared components.

1. First, ensure dependencies are installed (if you haven't already):

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

   html-webpack-plugin helps generate the final bundled HTML file, which plays nicely with html-loader.

2. Update your webpack.config.js:
   Add/modify the module rules and plugins section like this:

   const path = require('path');
   const HtmlWebpackPlugin = require('html-webpack-plugin');
   
   module.exports = {
     // ... your existing entry/output config
     module: {
       rules: [
         {
           test: /\.html$/,
           use: [
             {
               loader: 'html-loader',
               options: {
                 interpolate: true, // Enables interpolation for require() calls
                 minimize: false // Keep this false for easier debugging; set to true for production
               }
             }
           ]
         }
       ]
     },
     plugins: [
       new HtmlWebpackPlugin({
         template: './src/index.html', // Path to your source index.html
         filename: 'index.html' // Output filename in the dist folder
       })
     ]
   };
   

3. Modify your index.html:
   Replace the old SSI include lines with require() calls wrapped in ${}:

   ${require('./header.html')}
   
   <!-- Your main page content goes here -->
   
   ${require('./footer.html')}
   

   Make sure the paths to header.html and footer.html are relative to your index.html (adjust if they're in subfolders, like ./components/header.html).

Solution 2: Stick with SSI <!--#include--> syntax #

If you prefer keeping the original include syntax, use ssi-loader to parse those server-side includes:

1. Install the loader:

   npm install ssi-loader html-loader --save-dev
   

2. Update webpack.config.js rules:
   Chain ssi-loader before html-loader so it processes the SSI directives first:

   module: {
     rules: [
       {
         test: /\.html$/,
         use: ['html-loader', 'ssi-loader']
       }
     ]
   }
   

   Don't forget to keep the HtmlWebpackPlugin configuration from Solution 1 to generate the final HTML file.

3. Keep your original index.html includes:
   You can continue using:

   <!--#include file="header.html"-->
   
   <!-- Your main content -->
   
   <!--#include file="footer.html"-->
   

Both methods will bundle your header and footer into the final index.html during the Webpack build process. Just pick the one that fits your workflow best!

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