webpack-dev-server not showing content in localhost

Question

webpack-dev-server not showing content in localhost. Here are some files and the output screenshots for better understanding, Please help me to find the solution. I have tried many ways to fix it but couldn't find the solution.

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const FaviconsWebpackPlugin = require("favicons-webpack-plugin");

module.exports = {
mode: "production",
entry: "./src/index.js",

output: {
 path: path.resolve(__dirname, "dist"),
 filename: "bundle.js",
 publicPath: "/dist/",
},
devServer: {
 port: 3000,
 contentBase: path.join(__dirname, "dist"),
 compress: true,
 open: true,
},

module: {
 rules: [
   {
     test: /\.(js|jsx)$/,
     exclude: /nodeModules/,
     use: {
       loader: "babel-loader",
     },
   },
   {
     test: /\.(css|scss)$/i,
     use: ["style-loader", "css-loader", "sass-loader"],
   },
   {
     test: /\.svg$/,
     use: ["@svgr/webpack"],
   },
   {
     test: /\.(png|jp(e*)g|svg|gif)$/,
     use: ["file-loader"],
   },

   {
     test: /\.(jpe?g|png|gif|woff|woff2|otf|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
     use: [
       {
         loader: "url-loader",
         options: {
           limit: 1000,
           name: "assets/img/[name].[ext]",
         },
       },
     ],
   },
 ],
},
resolve: {
 extensions: ["*", ".js", ".jsx", ".css"],
},

plugins: [
 new HtmlWebpackPlugin({
   template: "./public/index.html",
   favicon: "./public/favicon.ico",
 }),
],
};

webpack-dev-server not showing content in localhost. Here are some files and the output screenshots for better understanding, Please help me to find the solution. I have tried many ways to fix it but couldn't find the solution.

Package.json

"scripts": {
    "serve": "webpack serve --mode development",
    "build": "webpack --mode production",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }, 
 "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.10",
    "@babel/preset-react": "^7.12.13",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.1.3",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.1",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.27.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  }

webpack-dev-server not showing content in localhost. Here are some files and the output screenshots for better understanding, Please help me to find the solution. I have tried many ways to fix it but couldn't find the solution.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>NvntriSystem</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta content="NvntriSystem" name="description" />
    <meta content="NvntriSystem" name="author" />
    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <!-- <link rel="manifest" href="/site.webmanifest" /> -->
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
    <meta name="msapplication-TileColor" content="#2b5797" />
    <meta name="theme-color" content="#ffffff" />
    <meta name="apple-mobile-web-app-title" content="NvntriSystem" />
    <meta name="application-name" content="NvntriSystem" />
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-QT7YMPDNZN"
    ></script>
    <link
      href="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css"
      rel="stylesheet"
    />
    <link
      href="https://unpkg.com/bootstrap-table@1.21.2/dist/extensions/reorder-rows/bootstrap-table-reorder-rows.css"
      rel="stylesheet"
    />

    <script src="https://cdn.jsdelivr.net/npm/tablednd@1.0.5/dist/jquery.tablednd.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.21.2/dist/extensions/reorder-rows/bootstrap-table-reorder-rows.min.js"></script>
    <!--For Google Analytics-->

    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());

      gtag("config", "G-QT7YMPDNZN");
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

It looks like you're using a jQuery plugin but have not imported the actual jQuery library. It could be that second error which is blocking other things from running and rendering — Harrison, May 19 '23 at 11:14

webpack-dev-server not showing content in localhost

0 Answers0