diff --git a/package.json b/package.json index f3aa210..dbce38d 100644 --- a/package.json +++ b/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", diff --git a/webpack/config.js b/webpack/config.js index 8da62a9..a62265e 100755 --- a/webpack/config.js +++ b/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, diff --git a/webpack/manifest.js b/webpack/manifest.js index 1c26207..15005c7 100755 --- a/webpack/manifest.js +++ b/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 }; diff --git a/webpack/rules/sass.js b/webpack/rules/sass.js index ebbbbff..d98086c 100755 --- a/webpack/rules/sass.js +++ b/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 }; // -----------------