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

EE port of "Prevent webpack from rebooting while switching branches"

Closes gitlab-ce#43638

See merge request gitlab-org/gitlab-ee!4741

config/webpack.config.js

@@ -21,33 +21,33 @@ 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 = '.') {
+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));
 
-// add and replace any ce entries with ee entries
-const eePageEntries = glob.sync('pages/**/index.js', { cwd: path.join(ROOT_PATH, 'ee/app/assets/javascripts') });
-eePageEntries.forEach(( path ) => generateAutoEntries(path, 'ee'));
+  // EE-specific auto entries
+  const eePageEntries = glob.sync('pages/**/index.js', { cwd: path.join(ROOT_PATH, 'ee/app/assets/javascripts') });
+  eePageEntries.forEach(( path ) => generateAutoEntries(path, 'ee'));
+  watchAutoEntries.concat(path.join(ROOT_PATH, 'ee/app/assets/javascripts/pages/'));
 
-// 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',
@@ -100,7 +100,15 @@ var config = {
     service_desk_issues:  'ee/service_desk_issues/index.js',
     roadmap:              'ee/roadmap',
     ee_sidebar:           'ee/sidebar/sidebar_bundle.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'),
@@ -323,10 +331,13 @@ var config = {
       'ee_icons':        path.join(ROOT_PATH, 'ee/app/views/shared/icons'),
       'ee_images':       path.join(ROOT_PATH, 'ee/app/assets/images'),
     }
-  }
-}
+  },
 
-config.entry = Object.assign({}, autoEntries, config.entry);
+  // sqljs requires fs
+  node: {
+    fs: 'empty',
+  },
+};
 
 if (IS_PRODUCTION) {
   config.devtool = 'source-map';
@@ -363,7 +374,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());

package.json

 {
   "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 .",
@@ -118,6 +118,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"
   }
 }

yarn.lock

@@ -8745,9 +8745,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"