Modern config only for local dev, fixing multi-compiler issues with HRM

Reference “Multi-compiler mode, hot-update.json 404” -> webpack/webpack-dev-server#2355

Signed-off-by: Andrew Welch <[email protected]>

Author: khalwat

buildchain/webpack.dev.js

@@ -1,6 +1,4 @@
 // webpack.dev.js - developmental builds
-const LEGACY_CONFIG = 'legacy';
-const MODERN_CONFIG = 'modern';
 
 // node modules
 const merge = require('webpack-merge');
@@ -16,7 +14,7 @@ const pkg = require('./package.json');
 const settings = require('./webpack.settings.js');
 
 // Configure the webpack-dev-server
-const configureDevServer = (buildType) => {
+const configureDevServer = () => {
     return {
         public: settings.devServerConfig.public(),
         contentBase: path.resolve(__dirname, settings.paths.templates),
@@ -38,121 +36,74 @@ const configureDevServer = (buildType) => {
 };
 
 // Configure Image loader
-const configureImageLoader = (buildType) => {
-    if (buildType === LEGACY_CONFIG) {
-        return {
-            test: /\.(png|jpe?g|gif|svg|webp)$/i,
-            use: [
-                {
-                    loader: 'file-loader',
-                    options: {
-                        name: 'img/[name].[ext]'
-                    }
-                }
-            ]
-        };
-    }
-    if (buildType === MODERN_CONFIG) {
-        return {
-            test: /\.(png|jpe?g|gif|svg|webp)$/i,
-            use: [
-                {
-                    loader: 'file-loader',
-                    options: {
-                        name: 'img/[name].[ext]'
-                    }
+const configureImageLoader = () => {
+    return {
+        test: /\.(png|jpe?g|gif|svg|webp)$/i,
+        use: [
+            {
+                loader: 'file-loader',
+                options: {
+                    name: 'img/[name].[ext]'
                 }
-            ]
-        };
-    }
+            }
+        ]
+    };
 };
 
 // Configure the Postcss loader
-const configurePostcssLoader = (buildType) => {
-    // Don't generate CSS for the legacy config in development
-    if (buildType === LEGACY_CONFIG) {
-        return {
-            test: /\.(pcss|css)$/,
-            loader: 'ignore-loader'
-        };
-    }
-    if (buildType === MODERN_CONFIG) {
-        return {
-            test: /\.(pcss|css)$/,
-            use: [
-                {
-                    loader: 'style-loader',
-                },
-                {
-                    loader: 'vue-style-loader',
-                },
-                {
-                    loader: 'css-loader',
-                    options: {
-                        importLoaders: 2,
-                        sourceMap: true
-                    }
-                },
-                {
-                    loader: 'resolve-url-loader'
-                },
-                {
-                    loader: 'postcss-loader',
-                    options: {
-                        sourceMap: true,
-                        config: {
-                            path: path.resolve(__dirname),
-                        }
+const configurePostcssLoader = () => {
+    return {
+        test: /\.(pcss|css)$/,
+        use: [
+            {
+                loader: 'style-loader',
+            },
+            {
+                loader: 'vue-style-loader',
+            },
+            {
+                loader: 'css-loader',
+                options: {
+                    importLoaders: 2,
+                    sourceMap: true
+                }
+            },
+            {
+                loader: 'resolve-url-loader'
+            },
+            {
+                loader: 'postcss-loader',
+                options: {
+                    sourceMap: true,
+                    config: {
+                        path: path.resolve(__dirname),
                     }
                 }
-            ]
-        };
-    }
+            }
+        ]
+    };
 };
 
 // Development module exports
-module.exports = [
-    merge(
-        common.legacyConfig,
-        {
-            output: {
-                filename: path.join('./js', '[name]-legacy.js'),
-                publicPath: settings.devServerConfig.public() + '/',
-            },
-            mode: 'development',
-            devtool: 'inline-source-map',
-            devServer: configureDevServer(LEGACY_CONFIG),
-            module: {
-                rules: [
-                    configurePostcssLoader(LEGACY_CONFIG),
-                    configureImageLoader(LEGACY_CONFIG),
-                ],
-            },
-            plugins: [
-                new webpack.HotModuleReplacementPlugin(),
-            ],
-        }
-    ),
-    merge(
-        common.modernConfig,
-        {
-            output: {
-                filename: path.join('./js', '[name].js'),
-                publicPath: settings.devServerConfig.public() + '/',
-            },
-            mode: 'development',
-            devtool: 'inline-source-map',
-            devServer: configureDevServer(MODERN_CONFIG),
-            module: {
-                rules: [
-                    configurePostcssLoader(MODERN_CONFIG),
-                    configureImageLoader(MODERN_CONFIG),
-                ],
-            },
-            plugins: [
-                new webpack.HotModuleReplacementPlugin(),
-                new DashboardPlugin(),
+module.exports = merge(
+    common.modernConfig,
+    {
+        output: {
+            filename: path.join('./js', '[name].js'),
+            publicPath: settings.devServerConfig.public() + '/',
+        },
+        mode: 'development',
+        devtool: 'inline-source-map',
+        devServer: configureDevServer(),
+        module: {
+            rules: [
+                configurePostcssLoader(),
+                configureImageLoader(),
             ],
-        }
-    ),
-];
+        },
+        plugins: [
+            new webpack.HotModuleReplacementPlugin(),
+            new DashboardPlugin(),
+        ],
+    }
+);