Merge pull request #399 from sharelatex/as-webpack-prod

Production webpack

services/web/.gitignore

@@ -54,6 +54,7 @@ public/js/*.map
 public/js/libs/sharejs.js
 public/js/analytics/
 public/js/directives/
+public/js/es/
 public/js/filters/
 public/js/ide/
 public/js/main/

services/web/Makefile

@@ -96,6 +96,11 @@ $(CSS_FILES): $(LESS_FILES)
 
 minify: $(CSS_FILES) $(JS_FILES)
 	$(GRUNT) compile:minify
+	$(MAKE) minify_es
+
+minify_es:
+	npm -q run webpack:production
+
 css: $(CSS_FILES)
 
 compile: $(JS_FILES) css public/js/libs/sharejs.js public/js/main.js public/js/ide.js
@@ -153,7 +158,7 @@ clean_app:
 	rm -rf app/js
 
 clean_frontend:
-	rm -rf public/js/{analytics,directives,filters,ide,main,modules,services,utils}
+	rm -rf public/js/{analytics,directives,es,filters,ide,main,modules,services,utils}
 	rm -f public/js/*.{js,map}
 	rm -f public/js/libs/sharejs.{js,map}
 

services/web/app/coffee/infrastructure/ExpressLocals.coffee

@@ -41,6 +41,7 @@ pathList = [
 	"#{jsPath}ide.js"
 	"#{jsPath}main.js"
 	"#{jsPath}libraries.js"
+	"#{jsPath}es/richText.js"
 	"/stylesheets/style.css"
 	"/stylesheets/ol-style.css"
 ]
@@ -146,6 +147,13 @@ module.exports = (app, webRouter, privateApiRouter, publicApiRouter)->
 				path = path + "?" + qs
 			return path
 
+		res.locals.buildWebpackPath = (jsFile, opts = {}) ->
+			if Settings.webpack? and !Settings.useMinifiedJs
+				path = Path.join(jsPath, jsFile)
+				return "#{Settings.webpack.host}:#{Settings.webpack.port}/public#{path}"
+			else
+				return res.locals.buildJsPath(jsFile, opts)
+
 		res.locals.buildCssPath = (cssFile, opts)->
 			path = Path.join("/stylesheets/", cssFile)
 			if opts?.hashedPath && hashedFiles[path]?

services/web/app/views/project/editor.pug

@@ -159,10 +159,9 @@ block requirejs
 		window.pdfCMapsPath = "#{pdfCMapsPath}"
 		window.uiConfig = JSON.parse('!{JSON.stringify(uiConfig).replace(/\//g, "\\/")}');
 
-	// TODO: inject based on environment
 	if hasFeature('rich-text')
 		script(
-			src="http://localhost:3809/public/js/es/richText.js"
+			src=buildWebpackPath('es/richText.js', {hashedPath:settings.useMinifiedJs})
 			type="text/javascript"
 		)
 

services/web/package.json

@@ -21,6 +21,7 @@
     "nodemon": "nodemon --config nodemon.json",
     "nodemon:frontend": "nodemon --config nodemon.frontend.json",
     "webpack": "webpack-dev-server --config webpack.config.dev.js",
+    "webpack:production": "webpack --config webpack.config.prod.js",
     "lint": "eslint -f unix ."
   },
   "dependencies": {

services/web/webpack.config.js

@@ -22,12 +22,6 @@ module.exports = {
 		library: ['Frontend', '[name]']
 	},
 
-	// TODO??
-	// Defines the external modules which will be stripped out when bundling for
-	// the main app. These modules are already loaded in the main app environment,
-	// so we strip them out to prevent conflicts.
-	// externals: {},
-
 	// Define how file types are handled by webpack
 	module: {
 		rules: [{

services/web/webpack.config.prod.js

@@ -0,0 +1,31 @@
+const path = require('path')
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+
+const base = require('./webpack.config')
+
+module.exports = merge(base, {
+  // Enable a full source map.
+  devtool: 'source-map',
+
+  output: {
+    // Override output path to minjs dir
+    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
+    })
+  ]
+})