IMPR: Add optional configuration values

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'

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/common": "^13.2.0",
-    "@angular/core": "^13.1.2",
+    "@angular/core": "^13.2.0",
-    "@apollo/client": "^3.5.7",
+    "@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",
+    "css-minimizer-webpack-plugin": "^3.4.1",
-    "eslint": "^8.6.0",
+    "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",
+    "mini-css-extract-plugin": "^2.5.3",
-    "msw": "^0.36.4",
+    "msw": "^0.36.8",
-    "node-fetch": "^3.1.0",
+    "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",

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: {
+        externals: 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',
-          },
         resolve: {
             modules: modules,
             extensions: ['.tsx', '.ts', '.js'],
-            alias: {
+            alias: aliases,
-              // 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'),*/
-            },
             fallback: {
                 path: false,
               },

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 = [
+const plugins = [
-    new webpack.ProvidePlugin({
+    new webpack.ProvidePlugin(common['PROVIDES']),
-        react: 'React',
-        'react-dom': 'ReactDOM',
-        /*$: 'jquery',
-        jQuery: 'jquery',*/
-      }),
     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: [
+        minimizer: minimizers,
-            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,
-                ],
-              }),
-        ],
       },
 
     output: {

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({
+    new webpack.ProvidePlugin(common['PROVIDES']),
-        react: 'React',
-        'react-dom': 'ReactDOM',
-        /*$: 'jquery',
-          jQuery: 'jquery',*/
-      }),
     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,