chore: update to latest webpack

Author: christopherthielen

.github/workflows/ci.yml

@@ -1,4 +1,4 @@
-name: 'CI'
+name: "CI"
 
 on:
   push:
@@ -7,7 +7,6 @@ on:
   pull_request:
 
 jobs:
-
   ci:
     needs: [test]
     runs-on: ubuntu-latest
@@ -19,12 +18,11 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        yarncmd: ['test']
+        yarncmd: ["test"]
     steps:
       - uses: actions/checkout@v2
       - name: Configure
         run: |
-          npm config set scripts-prepend-node-path auto
           git config --global user.email [email protected]
           git config --global user.name uirouter_github_actions
       - name: Install Dependencies

package.json

@@ -4,7 +4,7 @@
   "description": "Architecture overview demo for UI-Router React",
   "scripts": {
     "clean": "rimraf docs",
-    "start": "NODE_ENV=development webpack-dev-server --host 0.0.0.0 --port 3000 --config webpack.config.js --history-api-fallback --content-base ./",
+    "start": "NODE_ENV=development webpack serve --config webpack.config.js",
     "build": "npm run clean && mkdirp docs && cp index.html docs/index.html && NODE_ENV=production webpack",
     "test": "npm run build && cypress-runner run --path docs",
     "test:open": "npm run build && cypress-runner open --path docs",
@@ -15,7 +15,9 @@
   "dependencies": {
     "@uirouter/react": "^1.0.7",
     "@uirouter/visualizer": "^7.2.1",
+    "browserslist": "4.28.1",
     "lodash": "^4.17.21",
+    "picomatch": "4.0.3",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "whatwg-fetch": "^3.6.2"
@@ -25,18 +27,17 @@
     "@babel/preset-env": "^7.14.9",
     "@babel/preset-react": "^7.14.5",
     "@uirouter/cypress-runner": "^1.1.0",
-    "autoprefixer": "^9.8.6",
-    "babel-loader": "^8.2.2",
+    "autoprefixer": "^10.4.23",
+    "babel-loader": "^10.0.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "^3.6.0",
-    "file-loader": "^6.2.0",
-    "postcss-load-config": "^2.1.2",
-    "postcss-loader": "^3.0.0",
-    "rimraf": "^3.0.2",
-    "style-loader": "^1.3.0",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.2"
+    "copy-webpack-plugin": "^13.0.1",
+    "css-loader": "^7.1.2",
+    "postcss-load-config": "^6.0.1",
+    "postcss-loader": "^8.2.0",
+    "rimraf": "^6.1.2",
+    "style-loader": "^4.0.0",
+    "webpack": "^5.104.1",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2"
   }
 }

webpack.config.js

@@ -16,6 +16,14 @@ module.exports = {
     filename: 'bundle.js',
     publicPath: ''
   },
+  devServer: {
+    host: '0.0.0.0',
+    port: 3000,
+    static: {
+      directory: path.join(__dirname),
+    },
+    historyApiFallback: true,
+  },
   module: {
     rules: [
       {
@@ -26,15 +34,15 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        loader: 'style-loader!css-loader!postcss-loader'
+        use: ['style-loader', 'css-loader', 'postcss-loader']
       },
       {
         test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        loader: 'file-loader',
+        type: 'asset/resource',
       }
     ]
   },
   plugins: [
-    new CopyWebpackPlugin([ { from: 'static', to: 'static' } ]),
-  ]
+    new CopyWebpackPlugin({ patterns: [{ from: 'static', to: 'static' }] }),
+  ],
 };