From 9684f37a983012849e6fed2c941147771db62295 Mon Sep 17 00:00:00 2001 From: Tony Air Date: Mon, 31 Jan 2022 14:01:42 +0200 Subject: [PATCH] IMPR: Add optional configuration values --- app/_config/webpack.yml | 2 + package.json | 36 ++++---- webpack.config.common.js | 38 +++++--- webpack.config.js | 193 ++++++++++++++++++++------------------- webpack.config.serve.js | 13 +-- 5 files changed, 145 insertions(+), 137 deletions(-) diff --git a/app/_config/webpack.yml b/app/_config/webpack.yml index a358a90..f8b5f11 100644 --- a/app/_config/webpack.yml +++ b/app/_config/webpack.yml @@ -18,4 +18,6 @@ A2nt\CMSNiceties\Templates\WebpackTemplateProvider: injectClient: true GRAPHQL_URL: '/graphql' GRAPHQL_API_KEY: 'LgPaRkVPYa8IY7x3AjbLC8wx6oPPSlO01yPflFXecvQ' + PROCESS_CSS: true # Deep CSS minification + JQUERY: false # We don't use jQuery, otherwise it's aliassed and being loaded externaly #STATIC_URL: 'http://127.0.0.1' diff --git a/package.json b/package.json index 2d56154..0d3d194 100755 --- a/package.json +++ b/package.json @@ -36,9 +36,9 @@ "dependencies": { "@a2nt/meta-lightbox-js": "^4.1.7", "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react": "^4.4.6", - "@angular/common": "^13.1.2", - "@angular/core": "^13.1.2", - "@apollo/client": "^3.5.7", + "@angular/common": "^13.2.0", + "@angular/core": "^13.2.0", + "@apollo/client": "^3.5.8", "@jsanahuja/instagramfeed": "github:jsanahuja/instagramfeed", "@popperjs/core": "^2.11.2", "@turf/clone": "^6.5.0", @@ -50,7 +50,7 @@ "@turf/meta": "^6.5.0", "aos": "^2.3.4", "apollo3-cache-persist": "^0.13.0", - "axios": "^0.24.0", + "axios": "^0.25.0", "balanced-match": "^2.0.0", "bootbox": "^5.5.2", "bootstrap": "^5.1.3", @@ -59,7 +59,7 @@ "density-clustering": "^1.3.0", "fast-deep-equal": "^3.1.3", "font-awesome": "^4.7.0", - "graphql": "^16.2.0", + "graphql": "^16.3.0", "hammerjs": "^2.0.8", "inputmask": "^5.0.7", "kdbush": "^3.0.0", @@ -87,16 +87,16 @@ }, "devDependencies": { "@a2nt/image-sprite-webpack-plugin": "^0.2.5", - "@babel/core": "^7.16.7", + "@babel/core": "^7.16.12", "@babel/eslint-parser": "^7.16.5", "@babel/plugin-proposal-class-properties": "^7.16.7", "@babel/plugin-proposal-object-rest-spread": "^7.16.7", "@babel/plugin-syntax-jsx": "^7.16.7", "@babel/plugin-syntax-top-level-await": "^7.14.5", "@babel/plugin-transform-react-jsx": "^7.16.7", - "@babel/plugin-transform-runtime": "^7.16.8", + "@babel/plugin-transform-runtime": "^7.16.10", "@babel/plugin-transform-typescript": "^7.16.8", - "@babel/preset-env": "^7.16.8", + "@babel/preset-env": "^7.16.11", "@babel/preset-react": "^7.16.7", "@babel/runtime": "^7.16.7", "@googlemaps/markerclusterer": "*", @@ -112,12 +112,12 @@ "autoprefixer": "^10.4.2", "babel-loader": "^8.2.3", "classnames": "^2.3.1", - "copy-webpack-plugin": "^10.2.0", + "copy-webpack-plugin": "^10.2.4", "croppie": "^2.6.5", "cross-env": "^7.0.3", "css-loader": "^6.5.1", - "css-minimizer-webpack-plugin": "^3.3.1", - "eslint": "^8.6.0", + "css-minimizer-webpack-plugin": "^3.4.1", + "eslint": "^8.8.0", "eslint-plugin-import": "^2.25.4", "eslint-plugin-jquery": "^1.5.1", "eslint-plugin-react": "^7.28.0", @@ -135,14 +135,14 @@ "html-dom-parser": "^1.0.4", "html-entities": "^2.3.2", "html-loader": "^3.1.0", - "html-react-parser": "^1.4.5", + "html-react-parser": "^1.4.6", "html-webpack-plugin": "^5.5.0", "img-optimize-loader": "^1.0.7", "js-yaml": "^4.1.0", "loglevel": "^1.8.0", - "mini-css-extract-plugin": "^2.5.0", - "msw": "^0.36.4", - "node-fetch": "^3.1.0", + "mini-css-extract-plugin": "^2.5.3", + "msw": "^0.36.8", + "node-fetch": "^3.2.0", "object-assign": "^4.1.1", "optimism": "^0.16.1", "optimize-css-assets-webpack-plugin": "^6.0.1", @@ -155,7 +155,7 @@ "react-is": "^17.0.2", "react-lifecycles-compat": "^3.0.4", "regenerator-runtime": "^0.13.9", - "resolve-url-loader": "^4.0.0", + "resolve-url-loader": "^5.0.0", "rimraf": "^3.0.2", "routie": "0.0.1", "sass": "*", @@ -175,9 +175,9 @@ "tslib": "^2.3.1", "url": "^0.11.0", "url-loader": "^4.1.1", - "webpack": "^5.66.0", + "webpack": "^5.67.0", "webpack-bundle-analyzer": "^4.5.0", - "webpack-cli": "^4.9.1", + "webpack-cli": "^4.9.2", "webpack-dev-server": "^4.7.3", "webpack-manifest-plugin": "^4.1.1", "webpack-merge": "^5.8.0", diff --git a/webpack.config.common.js b/webpack.config.common.js index d16e6b9..d62c9ab 100755 --- a/webpack.config.common.js +++ b/webpack.config.common.js @@ -153,30 +153,38 @@ const JSVARS = { BASE_HREF: JSON.stringify(''), }; +const provides = {}; +const externals = {}; +const aliases = {}; + +if (!conf['JQUERY']) { + provides['react'] = 'React'; + provides['react-dom'] = 'ReactDOM'; + externals['react'] = 'React'; + externals['react-dom'] = 'ReactDOM'; +} else { + provides['$'] = 'jquery'; + provides['jQuery'] = 'jquery'; + externals['jquery'] = 'jQuery'; + + aliases['window.jQuery'] = require.resolve('jquery'); + aliases['$'] = require.resolve('jquery'); + aliases['jquery'] = require.resolve('jquery'); + aliases['jQuery'] = require.resolve('jquery'); +} + module.exports = { + PROVIDES: provides, JSVARS: JSVARS, configuration: conf, themes: themes, webpack: { entry: includes, - externals: { - // comment out jQuery if you don't use it to prevent bootstrap thinking that there's jQuery present - //jquery: 'jQuery', - react: 'React', - 'react-dom': 'ReactDOM', - }, + externals: externals, resolve: { modules: modules, extensions: ['.tsx', '.ts', '.js'], - alias: { - // comment out jQuery if you don't use it to prevent bootstrap thinking that there's jQuery present - /*'window.jQuery': require.resolve('jquery'), - $: require.resolve('jquery'), - jquery: require.resolve('jquery'), - jQuery: require.resolve('jquery'), - react: require.resolve('react'), - 'react-dom': require.resolve('react-dom'),*/ - }, + alias: aliases, fallback: { path: false, }, diff --git a/webpack.config.js b/webpack.config.js index 9658dd2..9592542 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -16,7 +16,7 @@ const FaviconsWebpackPlugin = require('favicons-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); -const { default: MiniCssExtractPlugin } = require('mini-css-extract-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //const ImageSpritePlugin = require('@a2nt/image-sprite-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); @@ -27,13 +27,8 @@ const COMPRESS = NODE_ENV === 'production' ? true : false; const IP = process.env.IP || conf.HOSTNAME; const PORT = process.env.PORT || conf.PORT; -let plugins = [ - new webpack.ProvidePlugin({ - react: 'React', - 'react-dom': 'ReactDOM', - /*$: 'jquery', - jQuery: 'jquery',*/ - }), +const plugins = [ + new webpack.ProvidePlugin(common['PROVIDES']), new webpack.DefinePlugin(common['JSVARS']), new webpack.LoaderOptionsPlugin({ minimize: COMPRESS, @@ -46,24 +41,6 @@ let plugins = [ }), ]; -if (COMPRESS) { - plugins.push(require('autoprefixer')); - - /*plugins.push( - new ImageSpritePlugin({ - exclude: /exclude|original|default-|icons|sprite|svg|logo|favicon/, - commentOrigin: false, - compress: COMPRESS, - extensions: ['png'], - indent: '', - log: true, - //outputPath: path.join(__dirname, conf.APPDIR, conf.DIST), - outputFilename: 'img/sprite-[hash].png', - padding: 0, - }), - );*/ -} - const indexPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'index.html'); if (fs.existsSync(indexPath)) { plugins.push( @@ -149,6 +126,100 @@ common.themes.forEach((theme) => { } }); +const minimizers = []; +minimizers.push( + new TerserPlugin({ + terserOptions: { + module: false, + parse: { + // we want terser to parse ecma 8 code. However, we don't want it + // to apply any minfication steps that turns valid ecma 5 code + // into invalid ecma 5 code. This is why the 'compress' and 'output' + // sections only apply transformations that are ecma 5 safe + // https://github.com/facebook/create-react-app/pull/4234 + ecma: 8, + }, + compress: { + ecma: 6, + warnings: false, + // Disabled because of an issue with Uglify breaking seemingly valid code: + // https://github.com/facebook/create-react-app/issues/2376 + // Pending further investigation: + // https://github.com/mishoo/UglifyJS2/issues/2011 + comparisons: false, + }, + keep_fnames: true, + keep_classnames: true, + + mangle: { + safari10: true, + keep_fnames: true, + keep_classnames: true, + reserved: ['$', 'jQuery', 'jquery'], + }, + output: { + ecma: 5, + comments: false, + // Turned on because emoji and regex is not minified properly using default + // https://github.com/facebook/create-react-app/issues/2488 + ascii_only: true, + }, + }, + // Use multi-process parallel running to improve the build speed + // Default number of concurrent runs: os.cpus().length - 1 + parallel: true, + }) +); + +if (conf['PROCESS_CSS']) { + minimizers.push( + new CssMinimizerPlugin({ + parallel: true, + minimizerOptions: [{ + preset: [ + 'default', + { + discardComments: { + removeAll: true, + }, + zindex: true, + cssDeclarationSorter: true, + reduceIdents: false, + mergeIdents: true, + mergeRules: true, + mergeLonghand: true, + discardUnused: true, + discardOverridden: true, + discardDuplicates: true, + }, + ], + },], + minify: [ + CssMinimizerPlugin.cssnanoMinify, + //CssMinimizerPlugin.cleanCssMinify, + ], + }) + ); +} + +if (COMPRESS) { + plugins.push(require('autoprefixer')); + + /*plugins.push( + new ImageSpritePlugin({ + exclude: /exclude|original|default-|icons|sprite|svg|logo|favicon/, + commentOrigin: false, + compress: COMPRESS, + extensions: ['png'], + indent: '', + log: true, + //outputPath: path.join(__dirname, conf.APPDIR, conf.DIST), + outputFilename: 'img/sprite-[hash].png', + padding: 0, + }), + );*/ +} + const BundleAnalyzerPlugin = require('webpack-bundle-analyzer') .BundleAnalyzerPlugin; plugins.push( @@ -172,75 +243,7 @@ const cfg = merge(common.webpack, { minChunks: 2, }, concatenateModules: true, //ModuleConcatenationPlugin - minimizer: [ - new TerserPlugin({ - terserOptions: { - module: false, - parse: { - // we want terser to parse ecma 8 code. However, we don't want it - // to apply any minfication steps that turns valid ecma 5 code - // into invalid ecma 5 code. This is why the 'compress' and 'output' - // sections only apply transformations that are ecma 5 safe - // https://github.com/facebook/create-react-app/pull/4234 - ecma: 8, - }, - compress: { - ecma: 6, - warnings: false, - // Disabled because of an issue with Uglify breaking seemingly valid code: - // https://github.com/facebook/create-react-app/issues/2376 - // Pending further investigation: - // https://github.com/mishoo/UglifyJS2/issues/2011 - comparisons: false, - }, - keep_fnames: true, - keep_classnames: true, - - mangle: { - safari10: true, - keep_fnames: true, - keep_classnames: true, - reserved: ['$', 'jQuery', 'jquery'], - }, - output: { - ecma: 5, - comments: false, - // Turned on because emoji and regex is not minified properly using default - // https://github.com/facebook/create-react-app/issues/2488 - ascii_only: true, - }, - }, - // Use multi-process parallel running to improve the build speed - // Default number of concurrent runs: os.cpus().length - 1 - parallel: true, - }), - new CssMinimizerPlugin({ - parallel: true, - minimizerOptions: [{ - preset: [ - 'default', - { - discardComments: { - removeAll: true, - }, - zindex: true, - cssDeclarationSorter: true, - reduceIdents: false, - mergeIdents: true, - mergeRules: true, - mergeLonghand: true, - discardUnused: true, - discardOverridden: true, - discardDuplicates: true, - }, - ], - },], - minify: [ - CssMinimizerPlugin.cssnanoMinify, - //CssMinimizerPlugin.cleanCssMinify, - ], - }), - ], + minimizer: minimizers, }, output: { diff --git a/webpack.config.serve.js b/webpack.config.serve.js index abe2f14..9525365 100644 --- a/webpack.config.serve.js +++ b/webpack.config.serve.js @@ -13,7 +13,7 @@ const { merge, } = require('webpack-merge'); -const { default: MiniCssExtractPlugin } = require('mini-css-extract-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const IP = process.env.IP || conf.HOSTNAME; @@ -23,12 +23,7 @@ const NODE_ENV = 'development'; //conf.NODE_ENV || process.env.NODE_ENV; const COMPRESS = NODE_ENV === 'production' ? true : false; const plugins = [ - new webpack.ProvidePlugin({ - react: 'React', - 'react-dom': 'ReactDOM', - /*$: 'jquery', - jQuery: 'jquery',*/ - }), + new webpack.ProvidePlugin(common['PROVIDES']), new webpack.DefinePlugin(common['JSVARS']), //new webpack.HotModuleReplacementPlugin(), new MiniCssExtractPlugin(), @@ -113,7 +108,7 @@ const config = merge(common.webpack, { options: { sourceMap: true, }, - },], + }, ], }, { test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, @@ -122,7 +117,7 @@ const config = merge(common.webpack, { { test: /\.(gif|png|jpg|jpeg|ttf|otf|eot|svg|webp|woff(2)?)$/, type: 'asset/resource', - },], + }, ], }, plugins: plugins,