求助：如何将Webpack作为任务运行器使用（原Gulp配置迁移）

Got it, let's walk through how to replicate your Gulp workflow—traversing HTML files and injecting variables for matching CSS/JS files—using Webpack as a task runner. No tool comparisons, just straight-up implementation.

Step 1: Install Dependencies #

First, grab the necessary packages to make this work. Run this in your project root:

npm install webpack webpack-cli html-webpack-plugin mini-css-extract-plugin html-loader --save-dev

• html-webpack-plugin: Handles HTML template processing and asset injection
• mini-css-extract-plugin: Pulls CSS into standalone files (so we can inject matching CSS)
• html-loader: Processes HTML templates to support variable replacement

Step 2: Project Structure #

Let’s assume your setup looks like this (adjust paths if yours differs):

src/
├── index.html
├── index.css
├── index.js
├── about.html
├── about.css
└── about.js

Each HTML file pairs with a .css and .js file of the same base name.

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

This config will automatically detect all your HTML files, create entry points for their matching JS files, and inject the corresponding CSS/JS into each template.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const fs = require('fs');

// Fetch all HTML files in the src folder
const htmlFiles = fs.readdirSync(path.resolve(__dirname, 'src'))
  .filter(file => file.endsWith('.html'));

module.exports = {
  // Dynamically create entry points for each matching JS file
  entry: htmlFiles.reduce((entries, file) => {
    const baseName = file.split('.')[0];
    entries[baseName] = `./src/${baseName}.js`;
    return entries;
  }, {}),

  // Output processed files to a dist folder, keeping original base names
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true, // Clear the dist folder on each build
  },

  module: {
    rules: [
      // Process CSS and extract into standalone files
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      // Prepare HTML templates for variable injection
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },
    ],
  },

  plugins: [
    // Output CSS files with matching base names
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
    // Generate a plugin instance for each HTML file
    ...htmlFiles.map(file => {
      const baseName = file.split('.')[0];
      return new HtmlWebpackPlugin({
        template: `./src/${file}`, // Path to your source HTML template
        filename: file, // Keep the original HTML filename in output
        chunks: [baseName], // Only inject the matching JS/CSS chunks
        // Pass custom variables to your HTML template
        templateParameters: {
          cssFile: `${baseName}.css`,
          jsFile: `${baseName}.js`,
        },
      });
    }),
  ],

  mode: 'development', // Switch to 'production' for optimized, minified builds
};

Step 4: Update Your HTML Templates #

In each HTML file, use the custom variables we set up to inject the matching CSS and JS. For example, in index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Index Page</title>
  <!-- Inject matching CSS file -->
  <link rel="stylesheet" href="<%= cssFile %>">
</head>
<body>
  <h1>Welcome to the Index Page</h1>
  <!-- Inject matching JS file -->
  <script src="<%= jsFile %>"></script>
</body>
</html>

If you prefer automatic injection (no manual variables), add inject: 'body' to the HtmlWebpackPlugin config—this will auto-add the CSS link in the <head> and JS script at the end of <body> without needing to write the variables yourself.

Step 5: Add npm Scripts #

Add these to your package.json to run Webpack like a task runner:

{
  "scripts": {
    "build": "webpack", // Run a one-time build
    "watch": "webpack --watch" // Watch for file changes and rebuild automatically
  }
}

Now you can run npm run build to generate your processed files in the dist folder, or npm run watch to keep Webpack running and auto-update when you edit files—just like your old Gulp watch task.

Quick Notes #

• If your original Gulp setup used a different template engine (like Handlebars), replace html-loader with a loader for that engine (e.g., handlebars-loader) and adjust the template syntax accordingly.
• For production, switch mode: 'production' in the Webpack config to enable minification and performance optimizations.

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