I'm rebuilding my own website and I want to add some transitions between pages.

In this example I have two pug files in my src folder: In index.pug I have a line of code ( a(href='./about') Go to about ) which should link to the about webpage. Instead I get this error cannot get /.

If I change that to ( a(href='./about.html Go to about ) and run this in production everything is working smoothly.

My folder structure is:

dist/
   -- index.html
   -- about.html
   -- main.css
   -- main.bundle.js
   -- vendor.bundle.js
node_modules/
src/
   -- partials/
   -- sass/
   -- index.pug
   -- about.pug
   -- index.js
   -- vendor.js
   -- main.scss
.gitignore
package-lock.json
package.json
webpack.common.js
webpack.dev.js
webpack.prod.js

webpack.common.js

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

module.exports = {
  entry: {
    main: './src/index.js',
    vendor: './src/vendor.js'
  },
  //plugins: [
  //  new HtmlWebpackPlugin({
  //    template: './src/index.pug'
  //  })
  //],
  module: {
    rules: [
      {
        test: /\.(svg|png|jpe?g|gif)$/i,
        type: 'asset/resource',
        generator: {
         filename: 'images/[hash][ext][query]',
       }
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-proposal-object-rest-spread']
          }
        }
      }
    ]
  }
};

webpack.prod.js

const path = require('path');
const common = require('./webpack.common.js');
const { merge } = require('webpack-merge');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require("terser-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = merge(common, {
  mode: 'production',
  output: {
    filename: '[name].[contenthash].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    minimizer: [
      new TerserPlugin(),
      new HtmlWebpackPlugin({
        template: "./src/index.pug",
        filename: 'index.html',
        minify: {
          removeAttributeQuotes: true,
          collapseWhitespace: true,
          removeComments: true
        }
      }),
      new HtmlWebpackPlugin({
        template: "./src/about.pug",
        filename: 'about.html',
        minify: {
          removeAttributeQuotes: true,
          collapseWhitespace: true,
          removeComments: true
        }
      })
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    }),
    new CleanWebpackPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: [
          {
            loader: 'simple-pug-loader'
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader, //3. Creates separate CSS file
          'css-loader', //2. Turns css into js
          'sass-loader' //1. Turns sass into css
        ]
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          // Using file-loader will create another set of images and will link to the wrong images
          // As of Webpack 5.0, this can be handled without installing a loader at all. So file-loader, url-loader, raw-loader, etc. are now obsolete.
          // https://stackoverflow.com/questions/69147962/file-loader-creating-2-images-and-linking-the-wrong-one
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
              },
              optipng: {
                enabled: false,
              },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4
              },
              gifsicle: {
                interlaced: false,
              },
              webp: {
                quality: 75
              }
            }
          }
        ]
      }
    ]
  },
});

webpack.dev.js

const path = require('path');
const common = require('./webpack.common.js');
const { merge } = require('webpack-merge');
const LiveReloadPlugin = require('webpack-livereload-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common, {
  mode: 'development',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: [
          {
            loader: 'simple-pug-loader'
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader', //3. Injects css into the DOM
          'css-loader', //2. Turns css into js
          'sass-loader' //1. Turns sass into css
        ]
      },
    ]
  },
  devServer: {
    hot: true,
    liveReload: true,
    open: 'Google Chrome'
  },
  plugins: [
    new LiveReloadPlugin({  // LiveReloadPlugin is necessary in order to fix live reloading on the dev side
      appendScriptTag: true
    }),
    new HtmlWebpackPlugin({
      template: './src/index.pug'
    }),
    new HtmlWebpackPlugin({
      template: './src/about.pug'
    })
  ]
});

I tried adding a new template in the HtmlWebpackPlugin in webpack.dev.js (this worked in production ), but it only shows the about page in localhost:8080 followed by this error:

Compiled with problems:X
ERROR
Conflict: Multiple assets emit different content to the same filename index.html

CodePudding user response：

Fixed it after some googling. Turns out I was outputting to the same index.html file. Adding different filenames to each HtmlWebpackPlugin in webpack.dev.js solved it.