Webpack isn't loading the app in index.html after build , no code in the build.js file

Question

Application works fine in development mode. However, Index.html is empty after the build and doesn't show anything.

Here's my App.jsx

function App() {
  return (
    <Router>
      <Header />
      <Switch>
        <Route path="/" exact component={Register} />
        {/* <Register />
        </Route> */}
        <Route path="/register" exact>
          <Register />
        </Route>
        <Route path="/login" exact>
          <Login />
        </Route>
        <Route path="/admin" exact>
          <Dashboard />
        </Route>
        <Route exact path="/:admin/all" component={AllEvents} />
        <Route exact path="/event/book" render={(props) => <BookAppointment {...props} />} />
      </Switch>
    </Router>
  );
}
export default App;

Webpack.common.js

const ESLintPlugin = require('eslint-webpack-plugin');
const path = require('path');
module.exports = {
  entry: './src/index.jsx', 
  plugins: [new ESLintPlugin()],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: path.resolve(__dirname, 'node_modules'),
        use: ['babel-loader'],
      },

      {
        test: /\.html$/,
        use: ['html-loader'],
      },
      {
        test: /\.(svg|png|jpg|jpeg|gif)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[hash].[ext]',
            ouputPath: 'images',
          },
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

Webpack.dev.js

const common = require('./webpack.common');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { merge } = require('webpack-merge');
module.exports = merge(common, {
  devtool: 'source-map',
  mode: 'development',
  output: {
    publicPath: '/',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.scss$/, // regular expression /regex/
        use: [
          'style-loader', // 3. Injects styles into the dom
          'css-loader', //2. compiles css into javascript
          'sass-loader', //1. compiles sass to css
          // it's basically style-loader(css-loader(sass-loader))
        ], 
      },
    ],
  },
  devServer: {
    open: true,
    overlay: true,
    historyApiFallback: true,
    proxy: {
      '/api': {
        target: 'http://localhost:5000/',
        pathRewrite: { '^/api': '' },
      },
    },
  },
});

webpack.prod.js

const path = require('path');
const common = require('./webpack.common');
const { merge } = require('webpack-merge');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common, {
  mode: 'production',
  output: {
    // where and in what name webpack bundle the code
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'build'),
    publicPath: '/',
  },
  optimization: {
    minimizer: [
      new OptimizeCssAssetsPlugin(),
      new TerserWebpackPlugin(),
      new HtmlWebpackPlugin({
        template: './src/index.html',
        minify: {
          removeAttributeQuotes: true,
          collapseWhitespace: true,
          removeComments: true,
        },
      }),
    ],
  },
  module: {
    rules: [
      {
        test: /\.scss$/, // regular expression /regex/
        use: [
          MiniCssExtractPlugin.loader, // 3. spits a new file
          'css-loader', //2. compiles css into javascript
          'sass-loader', //1. compiles sass to css
          // basically style-loader(css-loader(sass-loader))
        ], 
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),
    new CleanWebpackPlugin({ verbose: true }),
  ],
});

Here's my index.html after build

<!DOCTYPE html><html lang=en>
<head>
 <meta charset=UTF-8>
 <meta name=viewport content="width=device-width,initial-scale=1">
 <link rel=icon href="data:;base64,iVBORw0KGgo="><title>The Scheduling App</title>
 <link href=/main.e69f506daaac63b46b38.css rel=stylesheet></head>
<body>
 <div id=app></div>
 <script src=/main.5dcc8eebb9a160f1b5e4.js>
 </script>
</body>
</html>

Here's my package.json

{
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/eslint-parser": "^7.11.5",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-react": "^7.10.4",
    "babel-loader": "^8.1.0",
    "babel-plugin-styled-components": "^1.11.1",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.0",
    "eslint": "^7.11.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-react": "^7.21.4",
    "eslint-plugin-react-hooks": "^4.1.2",
    "eslint-webpack-plugin": "^2.1.0",
    "file-loader": "^6.1.1",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^1.0.0",
    "node-sass": "^4.14.1",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "sass-loader": "^10.0.3",
    "style-loader": "^2.0.0",
    "webpack": "^5.1.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^5.2.0"
  },
  "dependencies": {
    "axios": "^0.20.0",
    "core-js": "^3.6.5",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "regenerator-runtime": "^0.13.7"
  }
}

What am i doing wrong ? Is is a dependency issue ? Webpack gives this warning when I try to build

** [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets is deprecated (use Compilation.hook.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option) (Use node --trace-deprecation ... to show where the warning was created) (node:160318) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.

**

Thanks!

Answer 1

There are lots of work going on with the webpack@v5 update.

You can test and use pre-released alpha versions for webpack plugins such as html-wepack-plugin suggested by Jan Nicklas. Some webpack blocking issues are mentioned there too.

Amazing updates happened in webpack@v5 which you can read more here. I hope your feedbacks make releasing and improving faster for both webpack and webpack-plugins.