Splits webpack config into three separete files. Changes build script for production and development.

build.sh

@@ -12,12 +12,12 @@ current_OS=`uname`
 
 # For macOS (Darwin)
 if [ $current_OS == "Darwin" ]; then
-    find src ./webpack.config.js -type f \( -name "*.js" -or -name "*.vue" -or -name "webpack.config.js" \) -exec md5 {} \; | sort -k 2 | md5 > last-js-build.md5
+    find src *.js -type f \( -name "*.js" -or -name "*.vue" -or -name "webpack.common.js" -or -name "webpack.dev.js" -or -name "webpack.prod.js" \) -exec md5 {} \; | sort -k 2 | md5 > last-js-build.md5
     find ./src/views/admin/scss/ ./src/views/gutenberg-blocks/ ./src/views/gutenberg-blocks/tainacan-collections/collections-list ./src/views/gutenberg-blocks/tainacan-facets/facets-list ./src/views/gutenberg-blocks/tainacan-items/dynamic-items-list ./src/views/gutenberg-blocks/tainacan-items/items-list ./src/views/gutenberg-blocks/tainacan-terms/terms-list -type f \( -name "*.scss" \) -exec md5 {} \; | sort -k 2 | md5 > last-sass-build.md5
     find ./composer.json -type f \( -name "composer.json" \) -exec md5 {} \; | sort -k 2 | md5 > last-composer-build.md5
     find ./package.json -type f \( -name "package.json" -or -name "package-lock.json" \) -exec md5 {} \; | sort -k 2 | md5 > last-package-build.md5
 else
-    find src ./webpack.config.js -type f \( -name "*.js" -or -name "*.vue" -or -name "webpack.config.js" \) -exec md5sum {} \; | sort -k 2 | md5sum > last-js-build.md5
+    find src *.js -type f \( -name "*.js" -or -name "*.vue" -or -name "webpack.common.js" -or -name "webpack.dev.js" -or -name "webpack.prod.js" \) -exec md5sum {} \; | sort -k 2 | md5sum > last-js-build.md5
     find ./src/views/admin/scss/ ./src/views/gutenberg-blocks ./src/views/gutenberg-blocks/tainacan-collections/collections-list ./src/views/gutenberg-blocks/tainacan-facets/facets-list ./src/views/gutenberg-blocks/tainacan-items/dynamic-items-list ./src/views/gutenberg-blocks/tainacan-items/items-list ./src/views/gutenberg-blocks/tainacan-terms/terms-list -type f \( -name "*.scss" \) -exec md5sum {} \; | sort -k 2 | md5sum > last-sass-build.md5
     find ./composer.json -type f \( -name "composer.json" \) -exec md5sum {} \; | sort -k 2 | md5sum > last-composer-build.md5
     find ./package.json -type f \( -name "package.json" -or -name "package-lock.json" \) -exec md5sum {} \; | sort -k 2 | md5sum > last-package-build.md5
@@ -45,9 +45,26 @@ then
 fi
 
 new_md5_js=$(<last-js-build.md5)
+
 if [ "$current_md5_js" != "$new_md5_js" ]
 then
-    npm run build
+    is_prod_build=false
+    for i in "$@"
+    do
+        case $i in
+            --prod)
+                is_prod_build=true
+                echo "Building in production mode..."
+                npm run build-prod
+            ;;
+        esac
+    done
+
+    if [ "$is_prod_build" == false ]
+    then
+        echo "Building in development mode..."
+        npm run build
+    fi
 fi
 ### END npm build ###
 

package-lock.json

@@ -11785,6 +11785,16 @@
         "uuid": "^3.3.2"
       }
     },
+    "webpack-merge": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.4.0.tgz",
+      "integrity": "sha512-/scBgu8LVPlHDgqH95Aw1xS+L+PHrpHKOwYVGFaNOQl4Q4wwwWDarwB1WdZAbLQ24SKhY3Awe7VZGYAdp+N+gQ==",
+      "dev": true,
+      "requires": {
+        "clone-deep": "^4.0.1",
+        "wildcard": "^2.0.0"
+      }
+    },
     "webpack-sources": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
@@ -11839,6 +11849,12 @@
         "string-width": "^1.0.2 || 2"
       }
     },
+    "wildcard": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
+      "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
+      "dev": true
+    },
     "wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",

package.json

@@ -4,7 +4,8 @@
   "author": "Eduardo <eduardo.humberto1992@gmail.com>",
   "private": true,
   "scripts": {
-    "build": "cross-env NODE_ENV=development webpack --display-error-details --mode development --progress --hide-modules"
+    "build": "cross-env NODE_ENV=development webpack --config webpack.dev.js --display-error-details --progress --hide-modules",
+    "build-prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js --display-error-details --progress --hide-modules"
   },
   "dependencies": {
     "axios": "^0.19.2",
@@ -50,6 +51,7 @@
     "webpack": "^4.43.0",
     "webpack-bundle-analyzer": "^3.7.0",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-dev-server": "^3.11.0",
+    "webpack-merge": "^5.4.0"
   }
 }

webpack.common.js

@@ -1,7 +1,4 @@
 let path = require('path');
-let webpack = require('webpack');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 module.exports = {
     entry: {
@@ -96,7 +93,6 @@ module.exports = {
                     },
                 ],
             }
-
         ]
     },
     node: {
@@ -106,89 +102,5 @@ module.exports = {
     },
     performance: {
         hints: false
-    },
-};
-
-// Change to true for production mode
-const production = false;
-
-if (production === true) {
-    process.env.NODE_ENV = 'production';
-    const TerserPlugin = require('terser-webpack-plugin');
-
-    console.log(`Production: ${production}`);
-
-    module.exports.mode = 'production';
-
-    module.exports.devtool = undefined;
-
-    module.exports.plugins = (module.exports.plugins || []).concat([
-        new webpack.DefinePlugin({
-            'process.env': {
-                NODE_ENV: JSON.stringify('production')
-            }
-        }),
-        new webpack.LoaderOptionsPlugin({
-            minimize: true
-        }),
-        new VueLoaderPlugin(),
-    ]);
-
-    module.exports.resolve = {
-        alias: {
-            'vue$': 'vue/dist/vue.min',
-            'Swiper$': 'swiper/js/swiper.min.js'
-        }
     }
-
+};
-    module.exports.optimization = {
-        sideEffects: true,
-        minimize: true,
-        minimizer: [
-            new TerserPlugin({
-                parallel: true,
-                sourceMap: false,
-                cache: true,
-                terserOptions: {
-                    // We preserve function names that start with capital letters as
-                    // they're _likely_ component names, and these are useful to have
-                    // in tracebacks and error messages.
-                    keep_fnames: /__|_x|_n|_nx/,
-                    mangle: {
-                        keep_fnames: /__|_x|_n|_nx/,
-                    },
-                    output: {
-                        comments: /translators:/i,
-                    },
-                },
-                extractComments: false,
-            })
-        ],
-    };
-
-} else {
-    console.log(`Production: ${production}`);
-
-    module.exports.devtool = '';
-
-    module.exports.plugins = [
-        new webpack.DefinePlugin({
-            'process.env': {
-                NODE_ENV: JSON.stringify('development')
-            },
-        }),
-        new VueLoaderPlugin(),
-        new BundleAnalyzerPlugin({
-            openAnalyzer: false,
-            analyzerMode: 'static'
-        })
-    ];
-
-    module.exports.resolve = {
-        alias: {
-            //'vue$': 'vue/dist/vue.esm' // uncomment this and comment the above to use vue dev tools (can cause type error)
-            'vue$': 'vue/dist/vue.min',
-            'Swiper$': 'swiper/js/swiper.min.js'
-        }
-    }
-}

webpack.dev.js

@@ -0,0 +1,23 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+module.exports = merge(common, {
+    mode: 'development',
+    devtool: 'inline-source-map',
+    plugins: [
+        new VueLoaderPlugin(),
+        new BundleAnalyzerPlugin({
+            openAnalyzer: false,
+            analyzerMode: 'static'
+        })
+    ],
+    resolve: {
+        alias: {
+            //'vue$': 'vue/dist/vue.esm' // uncomment this and comment the above to use vue dev tools (can cause type error)
+            'vue$': 'vue/dist/vue.min',
+            'Swiper$': 'swiper/js/swiper.min.js'
+        }
+    } 
+});

webpack.prod.js

@@ -0,0 +1,43 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+
+module.exports = merge(common, {
+    mode: 'production',
+    devtool: undefined,
+    plugins: [
+        // new webpack.LoaderOptionsPlugin({
+        //     minimize: true
+        // }),
+        new VueLoaderPlugin(),
+    ],
+    optimization: {
+        minimizer: [
+            new TerserPlugin({
+                parallel: true,
+                sourceMap: false,
+                cache: true,
+                terserOptions: {
+                    // We preserve function names that start with capital letters as
+                    // they're _likely_ component names, and these are useful to have
+                    // in tracebacks and error messages.
+                    keep_fnames: /__|_x|_n|_nx/,
+                    mangle: {
+                        keep_fnames: /__|_x|_n|_nx/,
+                    },
+                    output: {
+                        comments: /translators:/i,
+                    },
+                },
+                extractComments: false,
+            }),
+        ]
+    },
+    resolve: {
+        alias: {
+            'vue$': 'vue/dist/vue.min',
+            'Swiper$': 'swiper/js/swiper.min.js'
+        }
+    }
+});