javascript – How do I configure WebPack and the package.json file to run the React project?

I made all the necessary WebPack settings and the project starts, but apparently it doesn't run css in the project and only a blank screen appears. Before configuring WebPack, 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 went like this:

    {
  "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 think 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 configure it.

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"
    })
  )
};

By changing the package.json script so that it does not run webpack, the project starts normally and runs the entire screen, but as it is in package.json and presents 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 ()
    at decode_param (C:UsersTiago AlbuquerqueDesktopMarketHub Backup12-05-2019MarketHubProjectmarketHub-Clientnode_modulesexpresslibrouterlayer.js:172:12)
    at Layer.match (C:UsersTiago AlbuquerqueDesktopMarketHub Backup12-05-2019MarketHubProjectmarketHub-Clientnode_modulesexpresslibrouterlayer.js:123:27)
    at matchLayer (C:UsersTiago AlbuquerqueDesktopMarketHub Backup12-05-2019MarketHubProjectmarketHub-Clientnode_modulesexpresslibrouterindex.js:574:18)
    at next (C:UsersTiago AlbuquerqueDesktopMarketHub Backup12-05-2019MarketHubProjectmarketHub-Clientnode_modulesexpresslibrouterindex.js:220:15)
    at expressInit (C:UsersTiago AlbuquerqueDesktopMarketHub Backup12-05-2019MarketHubProjectmarketHub-Clientnode_modulesexpresslibmiddlewareinit.js:40:5)
    at Layer.handle (as handle_request) (C:UsersTiago AlbuquerqueDesktopMarketHub Backup12-05-2019MarketHubProjectmarketHub-Clientnode_modulesexpresslibrouterlayer.js:95:5)
    at trim_prefix (C:UsersTiago AlbuquerqueDesktopMarketHub Backup12-05-2019MarketHubProjectmarketHub-Clientnode_modulesexpresslibrouterindex.js:317:13)
    at C:UsersTiago AlbuquerqueDesktopMarketHub Backup12-05-2019MarketHubProjectmarketHub-Clientnode_modulesexpresslibrouterindex.js:284:7
    at Function.process_params (C:UsersTiago AlbuquerqueDesktopMarketHub Backup12-05-2019MarketHubProjectmarketHub-Clientnode_modulesexpresslibrouterindex.js:335:12)
URIError: Failed to decode param '/%PUBLIC_URL%/manifest.json'
    at decodeURIComponent ()
    at decode_param (C:UsersTiago AlbuquerqueDesktopMarketHub Backup12-05-2019MarketHubProjectmarketHub-Clientnode_modulesexpresslibrouterlayer.js:172:12)
    at Layer.match (C:UsersTiago AlbuquerqueDesktopMarketHub Backup12-05-2019MarketHubProjectmarketHub-Clientnode_modulesexpresslibrouterlayer.js:123:27)
    at matchLayer (C:UsersTiago AlbuquerqueDesktopMarketHub Backup12-05-2019MarketHubProjectmarketHub-Clientnode_modulesexpresslibrouterindex.js:574:18)
    at next (C:UsersTiago AlbuquerqueDesktopMarketHub Backup12-05-2019MarketHubProjectmarketHub-Clientnode_modulesexpresslibrouterindex.js:220:15)
    at expressInit (C:UsersTiago AlbuquerqueDesktopMarketHub Backup12-05-2019MarketHubProjectmarketHub-Clientnode_modulesexpresslibmiddlewareinit.js:40:5)
    at Layer.handle (as handle_request) (C:UsersTiago AlbuquerqueDesktopMarketHub Backup12-05-2019MarketHubProjectmarketHub-Clientnode_modulesexpresslibrouterlayer.js:95:5)
    at trim_prefix (C:UsersTiago AlbuquerqueDesktopMarketHub Backup12-05-2019MarketHubProjectmarketHub-Clientnode_modulesexpresslibrouterindex.js:317:13)
    at C:UsersTiago AlbuquerqueDesktopMarketHub Backup12-05-2019MarketHubProjectmarketHub-Clientnode_modulesexpresslibrouterindex.js:284:7
    at Function.process_params (C:UsersTiago AlbuquerqueDesktopMarketHub Backup12-05-2019MarketHubProjectmarketHub-Clientnode_modulesexpresslibrouterindex.js:335:12)