404 found showing for main.js and vendor.js and vendor.css

[code-god-rajesh]

Bug report

What is the current behavior?

1. Issue - 404 showing for main and vendor js when we refresh the page

When hitting below url or click the router links the page loads properly

Opened the below page by clicking link

after refreshing the page by clicking F5 getting below error and the page failed to load

What I founded for this issue ?
if the url is http://localhost:3000/ or http://localhost:3000/questions or anything clicked by the link

Below are the request url for vendor.css, main.js, vendor.js
http://localhost:3000/assets/vendor.css
http://localhost:3000/main.d003daf837b8b564b8e3.js
http://localhost:3000/vendor.f0f69021a559e1792348.js

if the url is http://localhost:3000/questions/10 and try to refresh the page
Below are the request url for vendor.css, main.js, vendor.js
http://localhost:3000/questions/assets/vendor.css
http://localhost:3000/questions/main.d003daf837b8b564b8e3.js
http://localhost:3000/questions/vendor.f0f69021a559e1792348.js

If the current behavior is a bug, please provide the steps to reproduce.

webpack.config.js

const path = require('path');
const { styles } = require('@ckeditor/ckeditor5-dev-utils');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  // hot: true,
  entry: {
    main: path.resolve(__dirname, 'src', 'index.js'),
    vendor: path.resolve(__dirname, 'src', 'vendor.js'),
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].[contenthash].js',
  },
  devServer: {
    contentBase: 'build',
    historyApiFallback: true,
    port: 3000,
    inline: true,
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'assets/[name].css',
    }),
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ['build'],
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public', 'index.html'),
      favicon: path.resolve(__dirname, 'public', 'favicon.ico'),
    }),
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf|svg)$/i, //to load the font woff file this regex added
        exclude: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/, //to fix affection of ckeditor svg issue
        type: 'asset/resource',
      },
      {
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
        use: ['raw-loader'],
      },
      {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
        exclude: /\.(s)css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: styles.getPostCssConfig({
                themeImporter: {
                  themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),
                },
                minify: true,
              }),
            },
          },
        ],
      },
    ],
  },
};

Folder structure like below

Start script

2. Favicon is not showing in the browser tab
Favicon location

What is the expected behavior?
The page has to load properly at any cost

Other relevant information:
webpack version: "^5.47.1"
Node.js version:
Operating System: Windows
Additional tools:

Thanks is Advance

[alexander-akait]

Can you create reproducible test repo? It is not readable try to help you using screenshots

[code-god-rajesh]

Hi @alexander-akait Here is the repo url https://github.com/code-god-team/webpack-dev-server

To replicate the issue.

• http://localhost:3000/home - hit the url
• click the Test link
• Now you will see the text page
• now refresh the page, the page was broken
• Now in browser console getting some error
  

[alexander-akait]

Modify your index.html on:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack tutorial</title>
    <base href="/" />
</head>
<body>
    <div id="root"></div>
</body>
</html>

i.e. add <base href="/" />, another solution is set publicPath, but I don't recommend do it, because default auto value is better