reactjs - React: Webpack returns cannot / Get

Question

I'm newbie with Webpack and I'm trying to serve a page from development but I've got the error

Cannot / GET

The configuration of my webpack.config.babel.js is:

import webpack from "webpack";
import path from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";

console.log("devMode: " + process.env.NODE_ENV);

const currentPath = path.join(__dirname);

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve("dist/assets"),
        filename: "js/[name].bundle.js",
        chunkFilename: "js/[name].bundle.js",
        //publicPath: "/"   //It's mandatory to define this publicPath to get access to the website when we reload     
    },
    devtool: "source-map",
    devServer: {
        inline: true,
        contentBase: './dist', 
        port: 3000,
        open: true, //Open web browser by default
        historyApiFallback: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",    //where is our template
            filename: "../index.html",              //where we are going to put our index.html inside the output directory
            //favicon: "./src/client/img/favicon-96x96.png",
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true
            }            
        }),
    ],
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets: ["@babel/preset-react"]
                        }
                    }
                ]
            }
        ]
    }
};

The structure of files is:

And my package.json code file is:

{
  "scripts": {
    "clean": "rm -rf ./dist",
    "_comment0": "Script para arrancar webpack como servidor de desarrollo del front-page",
    "dev-webpack": "NODE_ENV=development webpack serve --mode development --env development --hot",
  },
  "dependencies": {
    "morgan": "^1.10.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.13",
    "@babel/preset-env": "^7.12.13",
    "@babel/preset-react": "^7.12.13",
    "@babel/register": "^7.12.13",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^5.0.0",
    "jshint": "^2.12.0",
    "path": "^0.12.7",
    "regenerator-runtime": "^0.13.7",
    "serve": "^11.3.2",
    "webpack": "^5.20.1",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  }
}

To start the webpack server I use this command: npm run dev-webpack

What am I doing wrong?

question from:https://stackoverflow.com/questions/66051890/react-webpack-returns-cannot-get

Answer 1

Waitting for answers