How do I set up Webpack and package.json to run the React project?

Question

I made all the necessary Webpack settings and the project starts, but apparently it does not run the css in the project and only leaves a blank screen. Before the Webpack settings my Package.json was as follows:

    {
  "name": "marketHub-Client",
  "version": "1.2.0",
  "private": true,
  "dependencies": {
    "base-64": "^0.1.0",
    "bootstrap": "^4.3.1",
    "chartist": "^0.11.0",
    "http-proxy-middleware": "^0.19.1",
    "node-sass": "^4.11.0",
    "node-sass-chokidar": "^1.3.4",
    "npm-run-all": "^4.1.5",
    "react": "^16.8.4",
    "react-bootstrap": "0.32.0",
    "react-chartist": "^0.13.3",
    "react-dom": "^16.8.4",
    "react-google-maps": "^9.4.5",
    "react-iframe": "^1.8.0",
    "react-infinite-scroll-component": "^4.5.2",
    "react-notification-system": "^0.2.17",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^3.0.1",
    "reactstrap": "^7.1.0"
  },
  "scripts": {
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build": "npm run build-css && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "prop-types": "^15.7.2"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Then it got this way:

    {
  "name": "marketHub-Client",
  "version": "1.2.0",
  "private": true,
  "dependencies": {
    "base-64": "^0.1.0",
    "bootstrap": "^4.3.1",
    "chartist": "^0.11.0",
    "http-proxy-middleware": "^0.19.1",
    "material-design-icons-iconfont": "^5.0.1",
    "node-sass": "^4.11.0",
    "node-sass-chokidar": "^1.3.4",
    "npm-run-all": "^4.1.5",
    "react": "^16.8.4",
    "react-bootstrap": "0.32.0",
    "react-chartist": "^0.13.3",
    "react-dom": "^16.8.4",
    "react-google-maps": "^9.4.5",
    "react-iframe": "^1.8.0",
    "react-infinite-scroll-component": "^4.5.2",
    "react-notification-system": "^0.2.17",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^3.0.1",
    "reactstrap": "^7.1.0"
  },
  "main": "webpack.config.js",
  "scripts": {
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "webpack-dev-server --open --hot --mode development && watch-css start-js",
    "build": "webpack --mode production && npm run build-css && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.8.0"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

I believe the error is in the execution of the script where it says:

"start": "webpack-dev-server --open --hot --mode development && watch-css start-js"

But I don’t know how to set up.

My Webpack was as follows:

    const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  stats: {
    children: false
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin(),
    new HtmlWebPackPlugin({
      template: './public/index.html',
      filename: "./index.html"
    })
  ]
};

Changing the package.json script to not run the webpack the project starts normally and runs the whole screen, but the way it is in package.json and presented the error as follows in the console:

 px-xl-5{padding-right:3rem!important}.pb-xl-5,.py-xl-5{padding-bottom:3rem!important}.pl-xl-5,.px-xl-5{padding-left:3rem!important}.m-xl-n1{margin:-.25rem!important}.mt-xl-n1,.my-xl-n1{margin-top:-.25rem!important}.mr-xl-n1,.mx-xl-n1{margin-right:-.25rem!important}.mb-xl-n1,.my-xl-n1{margin-bottom:-.25rem!important}.ml-xl-n1,.mx-xl-n1{margin-left:-.25rem!important}.m-xl-n2{margin:-.5rem!important}.mt-xl-n2,.my-xl-n2{margin-top:-.5rem!important}.mr-xl-n2,.mx-xl-n2{margin-right:-.5rem!important}.mb-xl-n2,.my-xl-n2{margin-bottom:-.5rem!important}.ml-xl-n2,.mx-xl-n2{margin-left:-.5rem!important}.m-xl-n3{margin:-1rem!important}.mt-xl-n3,.my-xl-n3{margin-top:-1rem!important}.mr-xl-n3,.mx-xl-n3{margin-right:-1rem!important}.mb-xl-n3,.my-xl-n3{margin-bottom:-1rem!important}.ml-xl-n3,.mx-xl-n3{margin-left:-1rem!important}.m-xl-n4{margin:-1.5rem!important}.mt-xl-n4,.my-xl-n4{margin-top:-1.5rem!important}.mr-xl-n4,.mx-xl-n4{margin-right:-1.5rem!important}.mb-xl-n4,.my-xl-n4{margin-bottom:-1.5rem!important}.ml-xl-n4,.mx-xl-n4{margin-left:-1.5rem!important}.m-xl-n5{margin:-3rem!important}.mt-xl-n5,.my-xl-n5{margin-top:-3rem!important}.mr-xl-n5,.mx-xl-n5{margin-right:-3rem!important}.mb-xl-n5,.my-xl-n5{margin-bottom:-3rem!important}.ml-xl-n5,.mx-xl-n5{margin-left:-3rem!important}.m-xl-auto{margin:auto!important}.mt-xl-auto,.my-xl-auto{margin-top:auto!important}.mr-xl-auto,.mx-xl-auto{margin-right:auto!important}.mb-xl-auto,.my-xl-auto{margin-bottom:auto!important}.ml-xl-auto,.mx-xl-auto{margin-left:auto!important}}.text-monospace{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace!important}.text-justify{text-align:justify!important}.text-wrap{white-space:normal!important}.text-nowrap{white-space:nowrap!important}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}@media (min-width:576px){.text-sm-left{text-align:left!important}.text-sm-right{text-align:right!important}.text-sm-center{text-align:center!important}}@media (min-width:768px){.text-md-left{text-align:left!important}.text-md-right{text-align:right!important}.text-md-center{text-align:center!important}}@media (min-width:992px){.text-lg-left{text-align:left!important}.text-lg-right{text-align:right!important}.text-lg-center{text-align:center!important}}@media (min-width:1200px){.text-xl-left{text-align:left!important}.text-xl-right{text-align:right!important}.text-xl-center{text-align:center!important}}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.font-weight-light{font-weight:300!important}.font-weight-lighter{font-weight:lighter!important}.font-weight-normal{font-weight:400!important}.font-weight-bold{font-weight:700!important}.font-weight-bolder{font-weight:bolder!important}.font-italic{font-style:italic!important}.text-white{color:#fff!important}.text-primary{color:#007bff!important}a.text-primary:focus,a.text-primary:hover{color:#0056b3!important}.text-secondary{color:#6c757d!important}a.text-secondary:focus,a.text-secondary:hover{color:#494f54!important}.text-success{color:#28a745!important}a.text-success:focus,a.text-success:hover{color:#19692c!important}.text-info{color:#17a2b8!important}a.text-info:focus,a.text-info:hover{color:#0f6674!important}.text-warning{color:#ffc107!important}a.text-warning:focus,a.text-warning:hover{color:#ba8b00!important}.text-danger{color:#dc3545!important}a.text-danger:focus,a.text-danger:hover{color:#a71d2a!important}.text-light{color:#f8f9fa!important}a.text-light:focus,a.text-light:hover{color:#cbd3da!important}.text-dark{color:#343a40!important}a.text-dark:focus,a.text-dark:hover{color:#121416!important}.text-body{color:#212529!important}.text-muted{color:#6c757d!important}.text-black-50{color:rgba(0,0,0,.5)!important}.text-white-50{color:rgba(255,255,255,.5)!important}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.text-decoration-none{text-decoration:none!important}.text-break{word-break:break-word!important;overflow-wrap:break-word!important}.text-reset{color:inherit!important}.visible{visibility:visible!important}.invisible{visibility:hidden!important}@media print{*,::after,::before{text-shadow:none!important;box-shadow:none!important}a:not(.btn){text-decoration:underline}abbr[title]::after{content:" (" attr(title) ")"}pre{white-space:pre-wrap!important}blockquote,pre{border:1px solid #adb5bd;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}@page{size:a3}body{min-width:992px!important}.container{min-width:992px!important}.navbar{display:none}.badge{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered td,.table-bordered th{border:1px solid #dee2e6!important}.table-dark{color:inherit}.table-dark tbody+tbody,.table-dark td,.table-dark th,.table-dark thead th{border-color:#dee2e6}.table .thead-dark th{color:inherit;border-color:#dee2e6}}
| /*# sourceMappingURL=bootstrap.min.css.map */
 @ ./src/index.js 6:0-46
i ｢wdm｣: Failed to compile.
URIError: Failed to decode param '/%PUBLIC_URL%/logo.png'
    at decodeURIComponent (<anonymous>)
    at decode_param (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\layer.js:172:12)
    at Layer.match (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\layer.js:123:27)
    at matchLayer (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\index.js:574:18)
    at next (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\index.js:220:15)
    at expressInit (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\middleware\init.js:40:5)
    at Layer.handle [as handle_request] (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\index.js:317:13)
    at C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\index.js:335:12)
URIError: Failed to decode param '/%PUBLIC_URL%/manifest.json'
    at decodeURIComponent (<anonymous>)
    at decode_param (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\layer.js:172:12)
    at Layer.match (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\layer.js:123:27)
    at matchLayer (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\index.js:574:18)
    at next (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\index.js:220:15)
    at expressInit (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\middleware\init.js:40:5)
    at Layer.handle [as handle_request] (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\index.js:317:13)
    at C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\index.js:335:12)