Add support for production-ready bundles

bin/webpack.base.js

@@ -3,12 +3,19 @@
  */
 const path = require( 'path' );
 const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
+const OptimizeCssAssetsPlugin = require( 'optimize-css-assets-webpack-plugin' );
+const TerserPlugin = require( 'terser-webpack-plugin' );
 
-console.log( path.resolve( __dirname, '../assets/styles' ) );
+/**
+ * Indicates if we're running the build process in production mode.
+ *
+ * @type {Boolean}
+ */
+const isProduction = process.env.NODE_ENV === 'production';
 
 module.exports = {
 	output: {
-		filename: '[name].js'
+		filename: isProduction ? '[name].min.js' : '[name].js'
 	},
 	module: {
 		rules: [
@@ -50,12 +57,29 @@ module.exports = {
 	},
 	plugins: [
 		new MiniCssExtractPlugin( {
-			filename: '[name].css'
-		} )
+			filename: isProduction ? '[name].min.css' : '[name].css'
+		} ),
+
+		...(
+			isProduction
+			? [
+				new OptimizeCssAssetsPlugin( {
+					cssProcessorPluginOptions: {
+						preset: [ 'default', { discardComments: { removeAll: true } } ]
+					}
+				} ),
+				new TerserPlugin( {
+					cache: true,
+					parallel: true
+				} )
+			]
+			: []
+		)
 	],
 	stats: {
 		modules: false,
 		hash: false,
-		builtAt: false
+		builtAt: false,
+		children: false
 	}
 };

package.json

@@ -6,7 +6,10 @@
     "test": "tests"
   },
   "scripts": {
-    "dev": "webpack --mode development --watch",
+    "start": "npm run development -- --watch",
+    "build": "npm run development && npm run production",
+    "development": "cross-env NODE_ENV=development webpack --mode development",
+    "production": "cross-env NODE_ENV=production webpack --mode production",
     "precommit": "lint-staged"
   },
   "lint-staged": {
@@ -40,6 +43,7 @@
     "babel-eslint": "^8.2.6",
     "babel-loader": "^8.0.2",
     "babel-plugin-module-resolver": "^3.1.1",
+    "cross-env": "^5.2.0",
     "css-loader": "^1.0.0",
     "eslint": "^5.8.0",
     "eslint-config-wordpress": "^2.0.0",
@@ -49,10 +53,12 @@
     "lint-staged": "^7.3.0",
     "mini-css-extract-plugin": "^0.4.4",
     "node-sass": "^4.9.4",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.2.0",
     "sass-loader": "^7.1.0",
     "sass-resources-loader": "^2.0.0",
+    "terser-webpack-plugin": "^1.1.0",
     "webpack": "4.19.1",
     "webpack-cli": "^3.1.1",
     "webpack-merge": "^4.1.4"