From 3f79bbc0a07788ce5a51bb3e55d8a25505f99ac7 Mon Sep 17 00:00:00 2001 From: Vadim Zainetdinov Date: Sat, 17 Aug 2024 13:57:16 +0200 Subject: [PATCH 1/2] :arrow_up: Updating the webpack version Migration from webpack 4 to 5th version --- package.json | 16 ++++++++-------- webpack/webpack.config-demo.js | 13 ++++++++++--- webpack/webpack.config-dev.js | 5 ++--- webpack/webpack.config.js | 15 +++++++++++---- 4 files changed, 31 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index ff77bf6..3b6bba6 100644 --- a/package.json +++ b/package.json @@ -180,7 +180,7 @@ ], "dependencies": { "flux": "~4.0.1", - "react-base16-styling": "~0.6.0", + "react-base16-styling": "~0.10.0", "react-lifecycles-compat": "~3.0.4", "react-textarea-autosize": "~8.3.2" }, @@ -212,7 +212,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", @@ -221,19 +221,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", diff --git a/webpack/webpack.config-demo.js b/webpack/webpack.config-demo.js index 53848ef..2e5da73 100644 --- a/webpack/webpack.config-demo.js +++ b/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 + }) + ] } }; diff --git a/webpack/webpack.config-dev.js b/webpack/webpack.config-dev.js index d196b76..0968223 100644 --- a/webpack/webpack.config-dev.js +++ b/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, diff --git a/webpack/webpack.config.js b/webpack/webpack.config.js index 4c7bc6a..a70b6d9 100644 --- a/webpack/webpack.config.js +++ b/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 From ec3909022e5b2d65a46120fa16ca55a6b0e3990e Mon Sep 17 00:00:00 2001 From: Vadim Zainetdinov Date: Sun, 22 Sep 2024 14:48:46 +0200 Subject: [PATCH 2/2] :arrow_down: Downgrading the react-base16-styling version The latest version has esm module type --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3b6bba6..95f9e85 100644 --- a/package.json +++ b/package.json @@ -180,7 +180,7 @@ ], "dependencies": { "flux": "~4.0.1", - "react-base16-styling": "~0.10.0", + "react-base16-styling": "~0.9.0", "react-lifecycles-compat": "~3.0.4", "react-textarea-autosize": "~8.3.2" },