Update webpack & co.

T4rk1n · T4rk1n · commit 1884b4ec2ae2 · 2023-05-29T10:22:06.000-04:00
diff --git a/{{cookiecutter.project_shortname}}/index.html b/{{cookiecutter.project_shortname}}/index.html
@@ -1,10 +1,10 @@
 <!doctype>
 <html>
     <head>
-        <title>my-dash-component</title>
+        <title>{{ cookiecutter.project_shortname }}</title>
     </head>
     <body>
         <div id='root'></div>
-        <script src="/{{ cookiecutter.project_shortname }}/output.js"></script>
+        <script src="/output.js"></script>
     </body>
 </html>
diff --git a/{{cookiecutter.project_shortname}}/package.json b/{{cookiecutter.project_shortname}}/package.json
@@ -14,7 +14,7 @@
 {%- endif %}
   "main": "build/index.js",
   "scripts": {
-    "start": "webpack-serve --config ./webpack.serve.config.js --open",
+    "start": "webpack serve --config ./webpack.serve.config.js --open",
     "validate-init": "python _validate_init.py",
     "prepublishOnly": "npm run validate-init",
     "build:js": "webpack --mode production",
@@ -29,30 +29,29 @@
     "ramda": "^0.26.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.5.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.5.4",
-    "@babel/preset-env": "^7.5.4",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/core": "^7.22.1",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/preset-env": "^7.22.2",
+    "@babel/preset-react": "^7.22.3",
+    "@plotly/dash-component-plugins": "^1.2.3",
     "@plotly/webpack-dash-dynamic-import": "^1.2.0",
-    "@plotly/dash-component-plugins": "^1.2.0",
-    "babel-eslint": "^10.0.2",
-    "babel-loader": "^8.0.6",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^9.1.2",
     "copyfiles": "^2.1.1",
-    "css-loader": "^3.0.0",
+    "css-loader": "^6.8.1",
     "eslint": "^6.0.1",
     "eslint-config-prettier": "^6.0.0",
     "eslint-plugin-import": "^2.18.0",
     "eslint-plugin-react": "^7.14.2",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "react": "^16.8.6",
-    "react-docgen": "^4.1.1",
+    "react-docgen": "^5.4.3",
     "react-dom": "^16.8.6",
-    "styled-jsx": "^3.2.1",
     "style-loader": "^0.23.1",
-    "terser-webpack-plugin": "^2.3.0",
-    "webpack": "4.36.1",
-    "webpack-cli": "3.3.6",
-    "webpack-serve": "3.1.0"
+    "styled-jsx": "^3.2.1",
+    "webpack": "5.84.1",
+    "webpack-cli": "5.1.1",
+    "webpack-dev-server": "^4.15.0"
   },
   "engines": {
     "node": ">=8.11.0",
diff --git a/{{cookiecutter.project_shortname}}/src/demo/App.js b/{{cookiecutter.project_shortname}}/src/demo/App.js
@@ -5,8 +5,8 @@ import { {{cookiecutter.component_name}} } from '../lib';
 
 class App extends Component {
 
-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
         this.state = {
             value: ''
         };
diff --git a/{{cookiecutter.project_shortname}}/webpack.config.js b/{{cookiecutter.project_shortname}}/webpack.config.js
@@ -1,5 +1,4 @@
 const path = require('path');
-const TerserPlugin = require('terser-webpack-plugin');
 const webpack = require('webpack');
 const WebpackDashDynamicImport = require('@plotly/webpack-dash-dynamic-import');
 const packagejson = require('./package.json');
@@ -55,6 +54,11 @@ module.exports = (env, argv) => {
             libraryTarget: 'window',
         },
         devtool,
+        devServer: {
+            static: {
+                directory: path.join(__dirname, '/')
+            }
+        },
         externals,
         module: {
             rules: [
@@ -82,19 +86,8 @@ module.exports = (env, argv) => {
             ],
         },
         optimization: {
-            minimizer: [
-                new TerserPlugin({
-                    sourceMap: true,
-                    parallel: true,
-                    cache: './.build_cache/terser',
-                    terserOptions: {
-                        warnings: false,
-                        ie8: false
-                    }
-                })
-            ],
             splitChunks: {
-                name: true,
+                name: '[name].js',
                 cacheGroups: {
                     async: {
                         chunks: 'async',
