Merge pull request #2032 from overleaf/as-upgrade-webpack

Upgrade webpack to v4

GitOrigin-RevId: a92c487fee79c29c5314273bf05439c9dbb0ce4d

services/web/.eslintignore

@@ -3,5 +3,3 @@ public/js
 public/minjs
 modules/**/public/js
 test/unit_frontend/js
-webpack.config.*
-karma.conf.js

services/web/.prettierignore

@@ -3,5 +3,3 @@ public/js
 public/minjs
 modules/**/public/js
 test/unit_frontend/js
-webpack.config.*
-karma.conf.js

services/web/karma.conf.js

@@ -1,6 +1,6 @@
 const path = require('path')
 
-module.exports = function (config) {
+module.exports = function(config) {
   config.set({
     customLaunchers: {
       ChromeCustom: {
@@ -43,20 +43,24 @@ module.exports = function (config) {
     // Configure webpack in the tests
     webpack: {
       module: {
-        rules: [{
+        rules: [
-          // Pass application JS files through babel-loader, compiling to ES5
+          {
-          test: /\.js$/,
+            // Pass application JS files through babel-loader, compiling to ES5
-          // Only compile application files (dependencies are in ES5 already)
+            test: /\.js$/,
-          exclude: /node_modules/,
+            // Only compile application files (dependencies are in ES5 already)
-          use: [{
+            exclude: /node_modules/,
-            loader: 'babel-loader',
+            use: [
-            options: {
+              {
-              // Configure babel-loader to cache compiled output so that subsequent
+                loader: 'babel-loader',
-              // compile runs are much faster
+                options: {
-              cacheDirectory: true
+                  // Configure babel-loader to cache compiled output so that
-            }
+                  // subsequent compile runs are much faster
-          }]
+                  cacheDirectory: true
-        }]
+                }
+              }
+            ]
+          }
+        ]
       },
       resolve: {
         // Alias common directories in import pathnames to cut down on the
@@ -82,14 +86,14 @@ module.exports = function (config) {
       { 'middleware:fake-img': ['factory', fakeImgMiddlewareFactory] }
     ],
     reporters: ['mocha']
-  });
+  })
 }
 
 /**
  * Handle fake images
  */
-function fakeImgMiddlewareFactory () {
+function fakeImgMiddlewareFactory() {
-  return function (req, res, next) {
+  return function(req, res, next) {
     if (req.originalUrl.startsWith('/fake/')) {
       return res.end('fake img response')
     }

services/web/package.json

@@ -144,7 +144,7 @@
     "karma-mocha": "^1.3.0",
     "karma-mocha-reporter": "^2.2.5",
     "karma-requirejs": "^1.1.0",
-    "karma-webpack": "^2.0.9",
+    "karma-webpack": "^4.0.2",
     "less": "^2.7.3",
     "less-plugin-autoprefix": "^2.0.0",
     "mkdirp": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
@@ -159,8 +159,9 @@
     "sinon-mongoose": "^2.3.0",
     "timekeeper": "",
     "translations-sharelatex": "git+https://github.com/sharelatex/translations-sharelatex.git#master",
-    "webpack": "^3.10.0",
+    "webpack": "^4.39.0",
-    "webpack-dev-server": "^2.11.1",
+    "webpack-cli": "^3.3.6",
-    "webpack-merge": "^4.1.1"
+    "webpack-dev-server": "^3.7.2",
+    "webpack-merge": "^4.2.1"
   }
 }

services/web/webpack.config.dev.js

@@ -3,43 +3,45 @@ const merge = require('webpack-merge')
 const base = require('./webpack.config')
 
 module.exports = merge(base, {
-	// Enable source maps for dev (fast compilation, slow runtime)
+  mode: 'development',
-	devtool: 'cheap-module-eval-source-map',
 
-	output: {
+  // Enable source maps for dev (fast compilation, slow runtime)
-		publicPath: '/public/js/es/'
+  devtool: 'cheap-module-eval-source-map',
-	},
 
-	devServer: {
+  output: {
-		// Disable webpack dev server auto-reload
+    publicPath: '/public/js/es/'
-		inline: false,
+  },
 
-		// Expose dev server as localhost with dev box
+  devServer: {
-		host: '0.0.0.0',
+    // Disable webpack dev server auto-reload
+    inline: false,
 
-		// Webpack-rails default port for webpack-dev-server
+    // Expose dev server as localhost with dev box
-		port: 3808,
+    host: '0.0.0.0',
 
-		// Allow CORS
+    // Webpack-rails default port for webpack-dev-server
-		headers: {
+    port: 3808,
-			'Access-Control-Allow-Origin': '*'
-		},
 
-		// Customise output to the (node) console
+    // Allow CORS
-		stats: {
+    headers: {
-			colors: true, // Enable some coloured highlighting
+      'Access-Control-Allow-Origin': '*'
-			timings: true, // Show build timing info
+    },
-			assets: true, // Show output bundles
-			warnings: true, // Show build warnings
-			// Hide some overly verbose output
-			hash: false,
-			version: false,
-			chunks: false
-		}
-	},
 
-	// Disable performance budget warnings as code is uncompressed in dev mode
+    // Customise output to the (node) console
-	performance: {
+    stats: {
-		hints: false
+      colors: true, // Enable some coloured highlighting
-	}
+      timings: true, // Show build timing info
+      assets: true, // Show output bundles
+      warnings: true, // Show build warnings
+      // Hide some overly verbose output
+      hash: false,
+      version: false,
+      chunks: false
+    }
+  },
+
+  // Disable performance budget warnings as code is uncompressed in dev mode
+  performance: {
+    hints: false
+  }
 })

services/web/webpack.config.js

@@ -1,92 +1,83 @@
 const fs = require('fs')
 const path = require('path')
-const webpack = require('webpack')
 
 const MODULES_PATH = path.join(__dirname, '/modules')
-const webpackENV = process.env.WEBPACK_ENV || 'development'
 
 // Generate a hash of entry points, including modules
 const entryPoints = {}
 if (fs.existsSync(MODULES_PATH)) {
-	fs.readdirSync(MODULES_PATH).reduce((acc, module) => {
+  fs.readdirSync(MODULES_PATH).reduce((acc, module) => {
-		const entryPath = path.join(MODULES_PATH, module, '/public/es/index.js')
+    const entryPath = path.join(MODULES_PATH, module, '/public/es/index.js')
-		if (fs.existsSync(entryPath)) {
+    if (fs.existsSync(entryPath)) {
-			acc[module] = entryPath
+      acc[module] = entryPath
-		}
+    }
-		return acc
+    return acc
-	}, entryPoints)
+  }, entryPoints)
 }
 
 // If no entry points are found, silently exit
 if (!Object.keys(entryPoints).length) {
-	console.warn('No entry points found, exiting')
+  console.warn('No entry points found, exiting')
-	process.exit(0)
+  process.exit(0)
 }
 
 module.exports = {
-	// Defines the "entry point(s)" for the application - i.e. the file which
+  // Defines the "entry point(s)" for the application - i.e. the file which
-	// bootstraps the application
+  // bootstraps the application
-	entry: entryPoints,
+  entry: entryPoints,
 
-	// Define where and how the bundle will be output to disk
+  // Define where and how the bundle will be output to disk
-	// Note: webpack-dev-server does not write the bundle to disk, instead it is
+  // Note: webpack-dev-server does not write the bundle to disk, instead it is
-	// kept in memory for speed
+  // kept in memory for speed
-	output: {
+  output: {
-		path: path.join(__dirname, '/public/js/es'),
+    path: path.join(__dirname, '/public/js/es'),
 
-		filename: '[name].js',
+    filename: '[name].js',
 
-		// Output as UMD bundle (allows main JS to import with CJS, AMD or global
+    // Output as UMD bundle (allows main JS to import with CJS, AMD or global
-		// style code bundles
+    // style code bundles
-		libraryTarget: 'umd',
+    libraryTarget: 'umd',
-		// Name the exported variable from output bundle
+    // Name the exported variable from output bundle
-		library: ['Frontend', '[name]']
+    library: ['Frontend', '[name]']
-	},
+  },
 
-	// Define how file types are handled by webpack
+  // Define how file types are handled by webpack
-	module: {
+  module: {
-		rules: [{
+    rules: [
-			// Pass application JS files through babel-loader, compiling to ES5
+      {
-			test: /\.js$/,
+        // Pass application JS files through babel-loader, compiling to ES5
-			// Only compile application files (dependencies are in ES5 already)
+        test: /\.js$/,
-			exclude: /node_modules/,
+        // Only compile application files (dependencies are in ES5 already)
-			use: [{
+        exclude: /node_modules/,
-				loader: 'babel-loader',
+        use: [
-				options: {
+          {
-					// Configure babel-loader to cache compiled output so that subsequent
+            loader: 'babel-loader',
-					// compile runs are much faster
+            options: {
-					cacheDirectory: true
+              // Configure babel-loader to cache compiled output so that
-				}
+              // subsequent compile runs are much faster
-			}]
+              cacheDirectory: true
-		},
+            }
-		{
+          }
-			// These options are necesary for handlebars to have access to helper
+        ]
-			// methods
+      },
-			test: /\.handlebars$/,
+      {
-			loader: "handlebars-loader",
+        // These options are neccesary for handlebars to have access to helper
-			options: {
+        // methods
-				compat: true,
+        test: /\.handlebars$/,
-				knownHelpersOnly: false,
+        loader: 'handlebars-loader',
-				runtimePath: 'handlebars/runtime',
+        options: {
-			}
+          compat: true,
-		}]
+          knownHelpersOnly: false,
-	},
+          runtimePath: 'handlebars/runtime'
-	resolve: {
+        }
-		alias: {
+      }
-			// makes handlerbars globally accessible to backbone
+    ]
-			handlebars: 'handlebars/dist/handlebars.min.js',
+  },
-			jquery: path.join(__dirname, 'node_modules/jquery/dist/jquery'),
+  resolve: {
-		}
+    alias: {
-	},
+      // makes handlebars globally accessible to backbone
-	plugins: [
+      handlebars: 'handlebars/dist/handlebars.min.js',
-		new webpack.DefinePlugin({
+      jquery: path.join(__dirname, 'node_modules/jquery/dist/jquery')
-			// Swaps out checks for NODE_ENV with the env. This is used by various
+    }
-			// libs to enable dev-only features. These checks then become something
+  }
-			// like `if ('production' == 'production')`. Minification will then strip
-			// the dev-only code from the bundle
-			'process.env': {
-				NODE_ENV: JSON.stringify(webpackENV)
-			},
-		})
-	]
 }

services/web/webpack.config.prod.js

@@ -1,30 +1,15 @@
 const path = require('path')
-const webpack = require('webpack')
 const merge = require('webpack-merge')
 
 const base = require('./webpack.config')
 
 module.exports = merge(base, {
+  mode: 'production',
+
   devtool: false,
 
   output: {
     // Override output path to minjs dir
-    path: path.join(__dirname, '/public/minjs/es'),
+    path: path.join(__dirname, '/public/minjs/es')
-  },
+  }
-
-  plugins: [
-    // Use UglifyJS to minimise output
-    new webpack.optimize.UglifyJsPlugin({
-      // Enable compression (options here are UglifyJS options)
-      compress: {
-        drop_console: true, // Remove console logs
-        warnings: false // Silence Uglify warnings
-      },
-      output: {
-        comments: false // Remove comments
-      },
-      // Prevent source map files from being stripped out of bundle
-      sourceMap: true
-    })
-  ]
 })