Added prebuilding minified CSS and JS.

package.json

@@ -8,7 +8,7 @@
     "dev": "webpack-dashboard -t 'Project' -- webpack server",
     "clean": "shx rm -rf ./dist",
     "build": "npm run clean && cross-env webpack",
-    "release": "npm run clean && NODE_ENV=production cross-env webpack",
+    "release:minified": "npm run clean && NODE_ENV=production MINIFY=true cross-env webpack",
     "preview": "cross-env webpack server",
     "lint:js": "eslint ./src ./webpack ./*.js -f table --ext .js --ext .jsx",
     "lint:scss": "stylelint ./src/**/*.scss --syntax scss",
@@ -30,6 +30,7 @@
     "copy-webpack-plugin": "^9.0.0",
     "cross-env": "^7.0.3",
     "css-loader": "^5.2.6",
+    "css-minimizer-webpack-plugin": "^4.0.0",
     "eslint": "^7.21.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-plugin-import": "^2.23.4",
@@ -39,7 +40,7 @@
     "node-sass": "^4.14.1",
     "postcss": "^8.3.4",
     "postcss-loader": "^6.1.0",
-    "postcss-preset-env": "^6.7.0",
+    "postcss-preset-env": "7.8.0",
     "sass-loader": "^12.1.0",
     "shx": "^0.3.3",
     "style-loader": "^2.0.0",

webpack/config.js

@@ -21,6 +21,8 @@ const
   rules     = require('./rules'),
   plugins   = require('./plugins');
 
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
 
 // ------------------
 // @Entry Point Setup
@@ -44,6 +46,17 @@ const resolve = {
   ],
 };
 
+let optimization = {};
+
+if (manifest.MINIFY) {
+  optimization = {
+    minimize: manifest.MINIFY,
+    minimizer: [
+      new CssMinimizerPlugin(),
+      new TerserPlugin()
+    ],
+  };
+}
 
 // -----------------
 // @Exporting Module
@@ -63,6 +76,7 @@ module.exports = {
   module: {
     rules,
   },
+  optimization: optimization,
   resolve,
   plugins,
   devServer,

webpack/manifest.js

@@ -27,8 +27,8 @@ const path = require('path');
 const
   NODE_ENV       = process.env.NODE_ENV || 'development',
   IS_DEVELOPMENT = NODE_ENV === 'development',
-  IS_PRODUCTION  = NODE_ENV === 'production';
-
+  IS_PRODUCTION  = NODE_ENV === 'production',
+  MINIFY         = process.env.MINIFY === 'true' || IS_PRODUCTION;
 
 // ------
 // @Utils
@@ -82,4 +82,5 @@ module.exports = {
   NODE_ENV,
   IS_DEVELOPMENT,
   IS_PRODUCTION,
+  MINIFY
 };

webpack/rules/sass.js

@@ -16,8 +16,8 @@
 const
   manifest          = require('../manifest'),
   path              = require('path'),
-  cssNext           = require('postcss-preset-env');
-
+  cssNext           = require('postcss-preset-env'),
+  ExtractTextPlugin = require('mini-css-extract-plugin');
 
 // ---------------
 // @Common Loaders
@@ -55,15 +55,21 @@ const loaders = [
           path.join(manifest.paths.src, ''),
         ],
       },
-    },
-  },
+    }
+  }
 ];
 
+if (manifest.IS_PRODUCTION) {
+  loaders.unshift(ExtractTextPlugin.loader);
+} else {
+  loaders.unshift({
+    loader: 'style-loader',
+  });
+}
+
 const rule = {
   test: /\.scss$/,
-  use: [{
-    loader: 'style-loader',
-  }].concat(loaders),
+  use: loaders
 };
 
 // -----------------