Merge branch 'fix-webpack-dynamic-entries' into 'master'

Prevent webpack from rebooting while switching branches

Closes #43638 and #43418

See merge request gitlab-org/gitlab-ce!17389

3 files changed, 57 insertions, 30 deletions

diff --git a/config/webpack.config.js b/config/webpack.config.js
index 2cc89f325e5..5e70995c4ab 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -21,29 +21,28 @@ var DEV_SERVER_LIVERELOAD = process.env.DEV_SERVER_LIVERELOAD !== 'false';
 var WEBPACK_REPORT = process.env.WEBPACK_REPORT;
 var NO_COMPRESSION = process.env.NO_COMPRESSION;
 
-// generate automatic entry points
-var autoEntries = {};
-var pageEntries = glob.sync('pages/**/index.js', { cwd: path.join(ROOT_PATH, 'app/assets/javascripts') });
-
-function generateAutoEntries(path, prefix = '.') {
-  const chunkPath = path.replace(/\/index\.js$/, '');
-  const chunkName = chunkPath.replace(/\//g, '.');
-  autoEntries[chunkName] = `${prefix}/${path}`;
-}
+var autoEntriesCount = 0;
+var watchAutoEntries = [];
+
+function generateEntries() {
+  // generate automatic entry points
+  var autoEntries = {};
+  var pageEntries = glob.sync('pages/**/index.js', { cwd: path.join(ROOT_PATH, 'app/assets/javascripts') });
+  watchAutoEntries = [
+    path.join(ROOT_PATH, 'app/assets/javascripts/pages/'),
+  ];
+
+  function generateAutoEntries(path, prefix = '.') {
+    const chunkPath = path.replace(/\/index\.js$/, '');
+    const chunkName = chunkPath.replace(/\//g, '.');
+    autoEntries[chunkName] = `${prefix}/${path}`;
+  }
 
-pageEntries.forEach(( path ) => generateAutoEntries(path));
+  pageEntries.forEach(( path ) => generateAutoEntries(path));
 
-// report our auto-generated bundle count
-var autoEntriesCount = Object.keys(autoEntries).length;
-console.log(`${autoEntriesCount} entries from '/pages' automatically added to webpack output.`);
+  autoEntriesCount = Object.keys(autoEntries).length;
 
-var config = {
-  // because sqljs requires fs.
-  node: {
-    fs: "empty"
-  },
-  context: path.join(ROOT_PATH, 'app/assets/javascripts'),
-  entry: {
+  const manualEntries = {
     balsamiq_viewer:      './blob/balsamiq_viewer.js',
     common:               './commons/index.js',
     common_vue:           './vue_shared/vue_resource_interceptor.js',
@@ -79,7 +78,15 @@ var config = {
     test:                 './test.js',
     u2f:                  ['vendor/u2f'],
     webpack_runtime:      './webpack.js',
-  },
+  };
+
+  return Object.assign(manualEntries, autoEntries);
+}
+
+var config = {
+  context: path.join(ROOT_PATH, 'app/assets/javascripts'),
+
+  entry: generateEntries,
 
   output: {
     path: path.join(ROOT_PATH, 'public/assets/webpack'),
@@ -296,10 +303,13 @@ var config = {
       'vue$':           'vue/dist/vue.esm.js',
       'spec':           path.join(ROOT_PATH, 'spec/javascripts'),
     }
-  }
-}
+  },
 
-config.entry = Object.assign({}, autoEntries, config.entry);
+  // sqljs requires fs
+  node: {
+    fs: 'empty',
+  },
+};
 
 if (IS_PRODUCTION) {
   config.devtool = 'source-map';
@@ -336,7 +346,24 @@ if (IS_DEV_SERVER) {
   };
   config.plugins.push(
     // watch node_modules for changes if we encounter a missing module compile error
-    new WatchMissingNodeModulesPlugin(path.join(ROOT_PATH, 'node_modules'))
+    new WatchMissingNodeModulesPlugin(path.join(ROOT_PATH, 'node_modules')),
+
+    // watch for changes to our automatic entry point modules
+    {
+      apply(compiler) {
+        compiler.plugin('emit', (compilation, callback) => {
+          compilation.contextDependencies = [
+            ...compilation.contextDependencies,
+            ...watchAutoEntries,
+          ];
+
+          // report our auto-generated bundle count
+          console.log(`${autoEntriesCount} entries from '/pages' automatically added to webpack output.`);
+
+          callback();
+        })
+      },
+    },
   );
   if (DEV_SERVER_LIVERELOAD) {
     config.plugins.push(new webpack.HotModuleReplacementPlugin());
diff --git a/package.json b/package.json
index 043af80a3be..cbad55b4c85 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "scripts": {
-    "dev-server": "nodemon -w 'config/webpack.config.js' -w 'app/assets/javascripts/dispatcher.js' -w 'app/assets/javascripts/pages/**/index.js' --exec 'webpack-dev-server --config config/webpack.config.js'",
+    "dev-server": "nodemon -w 'config/webpack.config.js' --exec 'webpack-dev-server --config config/webpack.config.js'",
     "eslint": "eslint --max-warnings 0 --ext .js,.vue .",
     "eslint-fix": "eslint --max-warnings 0 --ext .js,.vue --fix .",
     "eslint-report": "eslint --max-warnings 0 --ext .js,.vue --format html --output-file ./eslint-report.html .",
@@ -116,6 +116,6 @@
     "karma-webpack": "2.0.7",
     "nodemon": "^1.15.1",
     "prettier": "1.9.2",
-    "webpack-dev-server": "^2.11.1"
+    "webpack-dev-server": "^2.11.2"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 4d7dc1be854..ab0ad265d81 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8732,9 +8732,9 @@ webpack-dev-middleware@1.12.2, webpack-dev-middleware@^1.12.0:
     range-parser "^1.0.3"
     time-stamp "^2.0.0"
 
-webpack-dev-server@^2.11.1:
-  version "2.11.1"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.11.1.tgz#6f9358a002db8403f016e336816f4485384e5ec0"
+webpack-dev-server@^2.11.2:
+  version "2.11.2"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.11.2.tgz#1f4f4c78bf1895378f376815910812daf79a216f"
   dependencies:
     ansi-html "0.0.7"
     array-includes "^3.0.3"