Merge pull request #260 from sharelatex/as-webpack-2

Webpack build (take 2)

services/web/package.json

@@ -19,7 +19,8 @@
     "compile": "make compile",
     "start": "npm -q run compile && node app.js",
     "nodemon": "nodemon --config nodemon.json",
-    "nodemon:frontend": "nodemon --config nodemon.frontend.json"
+    "nodemon:frontend": "nodemon --config nodemon.frontend.json",
+    "webpack": "webpack-dev-server --config webpack.config.dev.js"
   },
   "dependencies": {
     "archiver": "0.9.0",
@@ -87,6 +88,9 @@
   },
   "devDependencies": {
     "autoprefixer": "^6.6.1",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.1",
     "bunyan": "0.22.1",
     "chai": "3.5.0",
     "chai-spies": "",
@@ -119,6 +123,9 @@
     "sandboxed-module": "0.2.0",
     "sinon": "^1.17.0",
     "timekeeper": "",
-    "translations-sharelatex": "git+https://github.com/sharelatex/translations-sharelatex.git#master"
+    "translations-sharelatex": "git+https://github.com/sharelatex/translations-sharelatex.git#master",
+    "webpack": "^3.10.0",
+    "webpack-dev-server": "^2.11.0",
+    "webpack-merge": "^4.1.1"
   }
 }

services/web/public/es/rich-text.js

@@ -0,0 +1 @@
+console.log('hello from rich text')

services/web/webpack.config.dev.js

@@ -0,0 +1,45 @@
+const merge = require('webpack-merge')
+
+const base = require('./webpack.config')
+
+module.exports = merge(base, {
+	// Enable source maps for dev (fast compilation, slow runtime)
+	devtool: 'cheap-module-eval-source-map',
+
+	output: {
+		publicPath: '/public/js/es/'
+	},
+
+	devServer: {
+		// Disable webpack dev server auto-reload
+		inline: false,
+
+		// Expose dev server as localhost with dev box
+		host: '0.0.0.0',
+
+		// Webpack-rails default port for webpack-dev-server
+		port: 3808,
+
+		// Allow CORS
+		headers: {
+			'Access-Control-Allow-Origin': '*'
+		},
+
+		// Customise output to the (node) console
+		stats: {
+			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

@@ -0,0 +1,53 @@
+const path = require('path')
+
+module.exports = {
+	// Defines the "entry point(s)" for the application - i.e. the file which
+	// bootstraps the application
+	entry: {
+		'rich-text': './public/es/rich-text.js'
+	},
+
+	// 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
+	// kept in memory for speed
+	output: {
+		path: path.join(__dirname, '/public/js/es'),
+
+		filename: '[name].js',
+
+		// Output as UMD bundle (allows main JS to import with CJS, AMD or global
+		// style code bundles
+		libraryTarget: 'umd',
+		// Name the exported variable from output bundle
+		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: [{
+			// Pass application JS files through babel-loader, compiling to ES5
+			test: /\.js$/, // Only compile .js files
+			// Only compile application files (dependencies are in ES5 already)
+			// include: [path.join(__dirname, './public/frontend')],
+			exclude: /node_modules/,
+			use: [{
+				loader: 'babel-loader',
+				options: {
+					presets: ['env'],
+					// Configure babel-loader to cache compiled output so that subsequent
+					// compile runs are much faster
+					cacheDirectory: true
+				}
+			}]
+		}]
+	},
+
+	// TODO
+	// plugins: {}
+}