Merge pull request #36 from VadimZvf/VadimZvf/updating-webpack

⬆️ Updating the webpack version

Author: Kikobeats

package.json

@@ -180,7 +180,7 @@
   ],
   "dependencies": {
     "flux": "~4.0.1",
-    "react-base16-styling": "~0.6.0",
+    "react-base16-styling": "~0.9.0",
     "react-lifecycles-compat": "~3.0.4",
     "react-textarea-autosize": "~8.3.2"
   },
@@ -213,7 +213,7 @@
     "react-dom": "~16.14.0",
     "react-github-button": "~0.1.11",
     "react-hot-loader": "~4.13.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "~5.0.1",
     "react-select": "~1.1.0",
     "react-test-renderer": "~16.14.0",
     "sass": "~1.47.0",
@@ -222,19 +222,19 @@
     "standard-version": "latest",
     "style-loader": "~1.3.0",
     "typescript": "^4.5.4",
-    "webpack": "~4.46.0",
-    "webpack-bundle-analyzer": "~3.9.0",
+    "webpack": "~5.93.0",
+    "webpack-bundle-analyzer": "~4.10.2",
     "webpack-bundle-size-analyzer": "~3.1.0",
-    "webpack-cli": "~3.3.12",
-    "webpack-dev-server": "~3.11.2"
+    "webpack-cli": "~5.1.4",
+    "webpack-dev-server": "~5.0.4"
   },
   "files": [
     "dist",
     "index.d.ts"
   ],
   "scripts": {
-    "build": "NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=production webpack --config webpack/webpack.config.js -p --display-error-details --progress --optimize-minimize",
-    "build:demo": "NODE_ENV=production webpack --config webpack/webpack.config-demo.js -p --display-error-details --progress --optimize-minimize",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=production webpack --config webpack/webpack.config.js --progress",
+    "build:demo": "NODE_ENV=production webpack --node-env production --config webpack/webpack.config-demo.js --progress",
     "dev": "NODE_ENV=development webpack-dev-server --config webpack/webpack.config-dev.js --open",
     "lint": "NODE_ENV=test ./node_modules/.bin/eslint src",
     "lint-fixup": "NODE_ENV=test ./node_modules/.bin/eslint src --ext .js,.jsx --fix",

webpack/webpack.config-demo.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
 
 const PATHS = {
     src: path.join(__dirname, '..', 'src'),
@@ -10,6 +11,7 @@ const PATHS = {
 };
 
 const config = {
+    mode: 'production',
     entry: [PATHS.demo + '/src/js/entry.js'],
     externals: {
         react: 'React',
@@ -22,9 +24,6 @@ const config = {
         libraryTarget: 'umd'
     },
     plugins: [],
-    optimization: {
-        minimize: true
-    },
     resolve: {
         extensions: ['.js', '.json', '.css', '.scss']
     },
@@ -54,6 +53,14 @@ const config = {
                 ]
             }
         ]
+    },
+    optimization: {
+        minimize: true,
+        minimizer: [
+            new TerserPlugin({
+                extractComments: false
+            })
+        ]
     }
 };
 

webpack/webpack.config-dev.js

@@ -10,6 +10,7 @@ const PATHS = {
 }
 
 const config = {
+  mode: 'development',
   entry: [PATHS.devServer + "/src/index.js"],
   externals: {
     react: "React",
@@ -18,10 +19,8 @@ const config = {
   devServer: {
     host: "localhost",
     port: 2000,
-    hot: true,
-    inline: true,
     historyApiFallback: true,
-    contentBase: PATHS.build
+    static: PATHS.build
   },
   output: {
     path: PATHS.build,

webpack/webpack.config.js

@@ -1,5 +1,6 @@
 const path = require("path")
 const webpack = require("webpack")
+const TerserPlugin = require("terser-webpack-plugin");
 
 const PATHS = {
   src: path.join(__dirname, "..", "src"),
@@ -9,6 +10,7 @@ const PATHS = {
 }
 
 const config = {
+  mode: 'production',
   entry: [PATHS.js + "/index.js"],
   externals: {
     cheerio: "window",
@@ -35,9 +37,6 @@ const config = {
     globalObject: "this"
   },
   plugins: [],
-  optimization: {
-    minimize: true
-  },
   resolve: {
     extensions: [".js", ".json", ".css", ".scss"]
   },
@@ -53,7 +52,15 @@ const config = {
         include: [PATHS.js]
       }
     ]
-  }
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        extractComments: false
+      }),
+    ],
+  },
 }
 
 module.exports = config