From ba41af1e9eaedb699f6c3c496fc7fe9af8a9b21d Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Mon, 12 Oct 2020 03:49:35 +0300 Subject: Modernize webpack config --- vnext/package-lock.json | 131 ++++++++++++++++++++++++++++++++++++++++-------- vnext/package.json | 7 ++- vnext/webpack.config.js | 20 +++----- 3 files changed, 123 insertions(+), 35 deletions(-) diff --git a/vnext/package-lock.json b/vnext/package-lock.json index 69ebc5a2..ac66bc73 100644 --- a/vnext/package-lock.json +++ b/vnext/package-lock.json @@ -1848,6 +1848,28 @@ } } }, + "@pmmmwh/react-refresh-webpack-plugin": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.2.tgz", + "integrity": "sha512-Loc4UDGutcZ+Bd56hBInkm6JyjyCwWy4t2wcDXzN8EDPANgVRj0VP8Nxn0Zq2pc+WKauZwEivQgbDGg4xZO20A==", + "dev": true, + "requires": { + "ansi-html": "^0.0.7", + "error-stack-parser": "^2.0.6", + "html-entities": "^1.2.1", + "native-url": "^0.2.6", + "schema-utils": "^2.6.5", + "source-map": "^0.7.3" + }, + "dependencies": { + "source-map": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", + "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==", + "dev": true + } + } + }, "@sindresorhus/is": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-2.1.1.tgz", @@ -4657,6 +4679,80 @@ } } }, + "css-minimizer-webpack-plugin": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-1.1.5.tgz", + "integrity": "sha512-mXgaoFjNpIudZfxD49N1aPtLxfXGJt+BVPVjQ+H66I48b5n4wJtFpYfffVr7izK8W6fD01J7K0kUcP6HGjw90w==", + "dev": true, + "requires": { + "cacache": "^15.0.5", + "cssnano": "^4.1.10", + "find-cache-dir": "^3.3.1", + "jest-worker": "^26.3.0", + "p-limit": "^3.0.2", + "schema-utils": "^3.0.0", + "serialize-javascript": "^5.0.1", + "source-map": "^0.6.1", + "webpack-sources": "^1.4.3" + }, + "dependencies": { + "find-cache-dir": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz", + "integrity": "sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==", + "dev": true, + "requires": { + "commondir": "^1.0.1", + "make-dir": "^3.0.2", + "pkg-dir": "^4.1.0" + } + }, + "make-dir": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", + "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", + "dev": true, + "requires": { + "semver": "^6.0.0" + } + }, + "p-limit": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.0.2.tgz", + "integrity": "sha512-iwqZSOoWIW+Ew4kAGUlN16J4M7OB3ysMLSZtnhmqx7njIHFPlxWBX8xo3lVTyFVq6mI/lL9qt2IsN1sHwaxJkg==", + "dev": true, + "requires": { + "p-try": "^2.0.0" + } + }, + "pkg-dir": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", + "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==", + "dev": true, + "requires": { + "find-up": "^4.0.0" + } + }, + "schema-utils": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz", + "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==", + "dev": true, + "requires": { + "@types/json-schema": "^7.0.6", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + } + }, + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true + } + } + }, "css-prefers-color-scheme": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz", @@ -10045,16 +10141,6 @@ "integrity": "sha512-eYboRV94Vco725nKMlpkn3nV2+96p9c3gKXRsYqAJSswSENvBhN7n5L+uDhY58xQa0UukWsDMTGELzmD8Q+wTA==", "dev": true }, - "last-call-webpack-plugin": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz", - "integrity": "sha512-7KI2l2GIZa9p2spzPIVZBYyNKkN+e/SQPpnjlTiPhdbDW3F86tdKKELxKpzJ5sgU19wQWsACULZmpTPYHeWO5w==", - "dev": true, - "requires": { - "lodash": "^4.17.5", - "webpack-sources": "^1.1.0" - } - }, "lazy-cache": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-2.0.2.tgz", @@ -10813,6 +10899,15 @@ "to-regex": "^3.0.1" } }, + "native-url": { + "version": "0.2.6", + "resolved": "https://registry.npmjs.org/native-url/-/native-url-0.2.6.tgz", + "integrity": "sha512-k4bDC87WtgrdD362gZz6zoiXQrl40kYlBmpfmSjwRO1VU0V5ccwJTlxuE72F6m3V0vc1xOf6n3UCP9QyerRqmA==", + "dev": true, + "requires": { + "querystring": "^0.2.0" + } + }, "natural-compare": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", @@ -11298,16 +11393,6 @@ "is-wsl": "^1.1.0" } }, - "optimize-css-assets-webpack-plugin": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.4.tgz", - "integrity": "sha512-wqd6FdI2a5/FdoiCNNkEvLeA//lHHfG24Ln2Xm2qqdIk4aOlsR18jwpyOihqQ8849W3qu2DX8fOYxpvTMj+93A==", - "dev": true, - "requires": { - "cssnano": "^4.1.10", - "last-call-webpack-plugin": "^3.0.0" - } - }, "optionator": { "version": "0.9.1", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz", @@ -13374,6 +13459,12 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-refresh": { + "version": "0.8.3", + "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", + "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==", + "dev": true + }, "react-router": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", diff --git a/vnext/package.json b/vnext/package.json index 67f0751e..85aed199 100644 --- a/vnext/package.json +++ b/vnext/package.json @@ -16,10 +16,12 @@ "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/preset-env": "7.11.5", "@babel/preset-react": "7.10.4", + "@pmmmwh/react-refresh-webpack-plugin": "^0.4.2", "babel-eslint": "^10.1.0", "babel-jest": "^26.5.2", "babel-loader": "^8.1.0", "css-loader": "^4.3.0", + "css-minimizer-webpack-plugin": "^1.1.5", "error-overlay-webpack-plugin": "^0.4.1", "eslint": "^7.11.0", "eslint-plugin-babel": "^5.3.1", @@ -33,10 +35,10 @@ "html-webpack-plugin": "^4.5.0", "jest": "^26.5.3", "mini-css-extract-plugin": "^1.0.0", - "optimize-css-assets-webpack-plugin": "^5.0.4", "postcss-loader": "^4.0.4", "postcss-preset-env": "^6.7.0", "react-cookie": "^4.0.3", + "react-refresh": "^0.8.3", "react-test-renderer": "^16.13.1", "style-loader": "^2.0.0", "stylelint": "^13.7.2", @@ -53,7 +55,8 @@ "spec": true } ], - "@babel/plugin-syntax-dynamic-import" + "@babel/plugin-syntax-dynamic-import", + "react-refresh/babel" ], "presets": [ [ diff --git a/vnext/webpack.config.js b/vnext/webpack.config.js index 3493184c..336f2d09 100644 --- a/vnext/webpack.config.js +++ b/vnext/webpack.config.js @@ -3,9 +3,10 @@ const path = require('path'); const HtmlWebPackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const TerserPlugin = require('terser-webpack-plugin'); -const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); +const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const ErrorOverlayPlugin = require('error-overlay-webpack-plugin'); const ESLintPlugin = require('eslint-webpack-plugin'); +const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); module.exports = (env, argv) => { const dev = argv.mode !== 'production'; @@ -105,21 +106,14 @@ module.exports = (env, argv) => { if (dev) { config.plugins.push(new webpack.HotModuleReplacementPlugin()); + config.plugins.push(new ReactRefreshWebpackPlugin()); } else { config.optimization = { minimizer: [ - new TerserPlugin({ - cache: true, - parallel: true, - sourceMap: dev, - terserOptions: { - output: { - comments: /@license/i - } - }, - extractComments: true - }), - new OptimizeCSSAssetsPlugin({}) + '...', + new CssMinimizerPlugin({ + sourceMap: true + }) ], splitChunks: { chunks: 'all' -- cgit v1.2.3