Merge pull request #11994 from archesproject/11993-cbyrd-fix-webpack-deveserver-memory-leak

fixes webpack dev server memory leak #11993

Author: chrabyrd

arches/install/arches-templates/webpack/webpack.config.dev.js

@@ -7,50 +7,66 @@ const StylelintPlugin = require('stylelint-webpack-plugin');
 
 const commonWebpackConfigPromise = require('./webpack.common.js');
 
+class WatchArchesUrlsPlugin {
+    constructor(watchPath) {
+        this.watchPath = watchPath;
+    }
+
+    apply(compiler) {
+        compiler.hooks.afterCompile.tap('WatchArchesUrlsPlugin', (compilation) => {
+            if (
+                compilation.fileDependencies &&
+                typeof compilation.fileDependencies.add === 'function'
+            ) {
+                compilation.fileDependencies.add(this.watchPath);
+            }
+            else if (Array.isArray(compilation.fileDependencies)) {
+                compilation.fileDependencies.push(this.watchPath);
+            }
+        });
+    }
+}
+
 module.exports = () => {
-    return new Promise((resolve, _reject) => {
+    return new Promise((resolve) => {
         commonWebpackConfigPromise().then(commonWebpackConfig => {
             resolve(merge(commonWebpackConfig, {
                 mode: 'development',
+                cache: {
+                    type: 'filesystem',
+                    buildDependencies: {
+                        config: [__filename],
+                    },
+                },
                 devtool: 'inline-source-map',
+                target: 'web',
                 devServer: {
                     historyApiFallback: true,
-                    client: {
-                        overlay: false,
-                    },
+                    client: { overlay: false },
                     hot: true,
                     host: '0.0.0.0',
+                    port: commonWebpackConfig.WEBPACK_DEVELOPMENT_SERVER_PORT,
                     devMiddleware: {
                         index: true,
                         writeToDisk: true,
                     },
-                    port: commonWebpackConfig.WEBPACK_DEVELOPMENT_SERVER_PORT,
                 },
                 watchOptions: {
                     ignored: '**/node_modules',
                 },
                 stats: {
-                    modules: false
+                    modules: false,
                 },
-                target: 'web',
                 plugins: [
                     new Webpack.DefinePlugin({
                         'process.env.NODE_ENV': JSON.stringify('development'),
                     }),
                     new StylelintPlugin({
                         files: Path.join('src', '**/*.s?(a|c)ss'),
                     }),
-                    {
-                        apply: (compiler) => {
-                            compiler.hooks.afterCompile.tap('WatchArchesUrlsPlugin', (compilation) => {
-                                compilation.fileDependencies.add(
-                                    Path.resolve(__dirname, APP_ROOT, '..', 'frontend_configuration', 'urls.json')
-                                );
-                            });
-                        },
-                    },
+                    new WatchArchesUrlsPlugin(Path.join(__dirname, "..", "frontend_configuration", 'urls.json')),
                 ],
             }));
         });
     });
-};
+};

webpack/webpack.config.dev.js

@@ -7,50 +7,66 @@ const StylelintPlugin = require('stylelint-webpack-plugin');
 
 const commonWebpackConfigPromise = require('./webpack.common.js');
 
+class WatchArchesUrlsPlugin {
+    constructor(watchPath) {
+        this.watchPath = watchPath;
+    }
+
+    apply(compiler) {
+        compiler.hooks.afterCompile.tap('WatchArchesUrlsPlugin', (compilation) => {
+            if (
+                compilation.fileDependencies &&
+                typeof compilation.fileDependencies.add === 'function'
+            ) {
+                compilation.fileDependencies.add(this.watchPath);
+            }
+            else if (Array.isArray(compilation.fileDependencies)) {
+                compilation.fileDependencies.push(this.watchPath);
+            }
+        });
+    }
+}
+
 module.exports = () => {
-    return new Promise((resolve, _reject) => {
+    return new Promise((resolve) => {
         commonWebpackConfigPromise().then(commonWebpackConfig => {
             resolve(merge(commonWebpackConfig, {
                 mode: 'development',
+                cache: {
+                    type: 'filesystem',
+                    buildDependencies: {
+                        config: [__filename],
+                    },
+                },
                 devtool: 'inline-source-map',
+                target: 'web',
                 devServer: {
                     historyApiFallback: true,
-                    client: {
-                        overlay: false,
-                    },
+                    client: { overlay: false },
                     hot: true,
                     host: '0.0.0.0',
+                    port: commonWebpackConfig.WEBPACK_DEVELOPMENT_SERVER_PORT,
                     devMiddleware: {
                         index: true,
                         writeToDisk: true,
                     },
-                    port: commonWebpackConfig.WEBPACK_DEVELOPMENT_SERVER_PORT,
                 },
                 watchOptions: {
                     ignored: '**/node_modules',
                 },
                 stats: {
-                    modules: false
+                    modules: false,
                 },
-                target: 'web',
                 plugins: [
                     new Webpack.DefinePlugin({
                         'process.env.NODE_ENV': JSON.stringify('development'),
                     }),
                     new StylelintPlugin({
                         files: Path.join('src', '**/*.s?(a|c)ss'),
                     }),
-                    {
-                        apply: (compiler) => {
-                            compiler.hooks.afterCompile.tap('WatchArchesUrlsPlugin', (compilation) => {
-                                compilation.fileDependencies.add(
-                                    Path.resolve(__dirname, APP_ROOT, '..', 'frontend_configuration', 'urls.json')
-                                );
-                            });
-                        },
-                    },
+                    new WatchArchesUrlsPlugin(Path.join(__dirname, "..", "frontend_configuration", 'urls.json')),
                 ],
             }));
         });
     });
-};
+};