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,30 +126,8 @@ common.themes.forEach((theme) => {
     }
   });
 
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+const minimizers = [];
-    .BundleAnalyzerPlugin;
+minimizers.push(
-plugins.push(
-    new BundleAnalyzerPlugin({
-        analyzerMode: 'static',
-        openAnalyzer: false,
-      }),
-);
-
-const cfg = merge(common.webpack, {
-    mode: NODE_ENV,
-    cache: {
-        type: 'filesystem',
-      },
-    recordsPath: path.join(__dirname, conf.APPDIR, conf.DIST, 'records.json'),
-    optimization: {
-        //removeAvailableModules: false,
-        //realContentHash: false,
-        splitChunks: {
-            name: 'vendor',
-            minChunks: 2,
-          },
-        concatenateModules: true, //ModuleConcatenationPlugin
-        minimizer: [
   new TerserPlugin({
     terserOptions: {
         module: false,
@@ -213,7 +168,11 @@ const cfg = merge(common.webpack, {
     // 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: [{
@@ -239,8 +198,52 @@ const cfg = merge(common.webpack, {
           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(
+    new BundleAnalyzerPlugin({
+        analyzerMode: 'static',
+        openAnalyzer: false,
+      }),
+);
+
+const cfg = merge(common.webpack, {
+    mode: NODE_ENV,
+    cache: {
+        type: 'filesystem',
+      },
+    recordsPath: path.join(__dirname, conf.APPDIR, conf.DIST, 'records.json'),
+    optimization: {
+        //removeAvailableModules: false,
+        //realContentHash: false,
+        splitChunks: {
+            name: 'vendor',
+            minChunks: 2,
+          },
+        concatenateModules: true, //ModuleConcatenationPlugin
+        minimizer: minimizers,
       },
 
     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,