webpack 5 for dev

Author: Ilaiwi

package.json

@@ -10,7 +10,7 @@
     "lint": "eslint --ext .js --ext .jsx ./src",
     "lint:fix": "prettier-eslint --parser babylon --write \"src/**/*.js\"",
     "prepublish": "npm run build:lib",
-    "start": "webpack-dev-server --hot --host 0.0.0.0 --display-modules",
+    "start": "webpack-dev-server --hot --host 0.0.0.0",
     "test": "jest",
     "test:watch": "jest --watch"
   },
@@ -117,7 +117,7 @@
     "babel-loader": "^8.0.6",
     "babel-plugin-react-remove-properties": "^0.3.0",
     "cross-env": "^5.1.4",
-    "css-loader": "~0.26.0",
+    "css-loader": "^6.7.1",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "eslint": "^4.16.0",
@@ -135,7 +135,7 @@
     "jest-watch-typeahead": "^0.3.1",
     "jsdom": "^11.5.1",
     "moment": "^2.11.1",
-    "node-sass": "^4.12.0",
+    "node-sass": "^7.0.1",
     "prettier": "^1.10.2",
     "prettier-eslint-cli": "^4.7.0",
     "prop-types": "^15.6.2",
@@ -146,10 +146,10 @@
     "react-testing-library": "^6.0.3",
     "regenerator-runtime": "^0.13.2",
     "rimraf": "^2.6.2",
-    "sass-loader": "^7.0.3",
-    "style-loader": "~0.13.0",
-    "webpack": "^4.16.3",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.1.5"
+    "sass-loader": "^13.0.0",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.72.1",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.9.0"
   }
 }

webpack.config.js

@@ -1,9 +1,8 @@
 const path = require('path')
 
-const port = process.env.PORT || 8888
+const port = process.env.PORT || 4000
 
 const config = {
-  devtool: 'cheap-eval-source-map',
   context: path.join(__dirname, './demo'),
   entry: {
     // vendor: ['react', 'react-dom', 'faker', 'interactjs', 'moment'],
@@ -24,12 +23,12 @@ const config = {
     rules: [
       {
         test: /\.scss$/,
-        loader: 'style-loader!css-loader!sass-loader'
+        use: ['style-loader','css-loader','sass-loader']
       },
       {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,
-        loaders: ['babel-loader']
+        loader: 'babel-loader'
       }
     ]
   },
@@ -46,7 +45,9 @@ const config = {
     }
   },
   devServer: {
-    contentBase: './demo',
+    static: {
+      directory: './demo'
+    },
     port
   }
 }