使用Webpack v4+webpack-dev-server时Pug无法编译输出求助

Hey there! Let's troubleshoot why you're not seeing your compiled Pug content when running webpack-dev-server --mode development. I've looked over your config and spotted a few key issues that are likely causing this.

Key Problems in Your Current Config #

1. webpack-dev-server stores files in memory (not disk)
   Your devServer.contentBase points to the dist directory, but in development mode, webpack-dev-server doesn't write compiled files to disk by default. If dist is empty, the server has no HTML file to serve.

2. Missing html-loader for Pug processing
   pug-loader only compiles Pug to raw HTML strings, but webpack needs html-loader to convert that string into a module that HtmlWebpackPlugin can use to generate a proper HTML file.

3. inject: false blocks JS injection (not the root cause, but still problematic)
   This setting prevents HtmlWebpackPlugin from adding your bundle.js to the generated HTML, which will break your JS functionality even if the Pug content loads.

Corrected Webpack Config #

Here's the adjusted config with fixes explained:

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

module.exports = {
  entry: './src/js/main.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.pug$/,
        // Add html-loader to process the compiled Pug HTML string
        use: ['html-loader', 'pug-loader']
      }
    ]
  },
  devServer: {
    // Replace deprecated contentBase with static (webpack-dev-server v4 standard)
    static: {
      directory: path.join(__dirname, 'src') // Serve static assets from src if needed
    },
    hot: true,
    open: true,
    progress: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src/templates/pages/index.pug'),
      // Inject bundle.js into the body (use true to inject into head instead)
      inject: 'body'
    })
  ]
};

Additional Steps to Ensure It Works #

1. Install missing dependencies
   Make sure you have all required packages installed:

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

2. Run the dev server again
   Execute webpack-dev-server --mode development once more. Now webpack-dev-server will serve the in-memory compiled HTML directly, so you should see your Pug content rendered in the browser.

3. For production builds
   If you need to generate physical files in dist, run:

   webpack --mode production
   

内容的提问来源于stack exchange，提问作者zh-mskl9