add webpack, webpack-rails, and webpack-dev-server along with a simple hello world test

Add the following line to GDK Procfile to play with it:

    webpack: exec support/exec-cd gitlab npm run dev-server

10 files changed, 70 insertions, 1 deletions

diff --git a/.eslintignore b/.eslintignore
index b4bfa5a1f7a..a9d27a6765e 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,7 +1,8 @@
+/builds/
 /coverage/
 /coverage-javascript/
 /node_modules/
 /public/
 /tmp/
 /vendor/
-/builds/
+webpack.config.js
diff --git a/Gemfile b/Gemfile
index 2e8ad75fd71..27e415966df 100644
--- a/Gemfile
+++ b/Gemfile
@@ -214,6 +214,8 @@ gem 'oj', '~> 2.17.4'
 gem 'chronic', '~> 0.10.2'
 gem 'chronic_duration', '~> 0.10.6'
 
+gem 'webpack-rails', '~> 0.9.9'
+
 gem 'sass-rails', '~> 5.0.6'
 gem 'coffee-rails', '~> 4.1.0'
 gem 'uglifier', '~> 2.7.2'
diff --git a/Gemfile.lock b/Gemfile.lock
index c99313163a4..b88f51a7a43 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -779,6 +779,8 @@ GEM
     webmock (1.21.0)
       addressable (>= 2.3.6)
       crack (>= 0.3.2)
+    webpack-rails (0.9.9)
+      rails (>= 3.2.0)
     websocket-driver (0.6.3)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.2)
@@ -980,6 +982,7 @@ DEPENDENCIES
   vmstat (~> 2.3.0)
   web-console (~> 2.0)
   webmock (~> 1.21.0)
+  webpack-rails (~> 0.9.9)
   wikicloth (= 0.8.1)
 
 BUNDLED WITH
diff --git a/Procfile b/Procfile
index cad738d4292..5e8f4a962ab 100644
--- a/Procfile
+++ b/Procfile
@@ -4,4 +4,5 @@
 #
 web: RAILS_ENV=development bin/web start_foreground
 worker: RAILS_ENV=development bin/background_jobs start_foreground
+webpack: npm run dev-server
 # mail_room: bundle exec mail_room -q -c config/mail_room.yml
diff --git a/app/assets/javascripts/webpack/bundle.js b/app/assets/javascripts/webpack/bundle.js
new file mode 100644
index 00000000000..6c841b25771
--- /dev/null
+++ b/app/assets/javascripts/webpack/bundle.js
@@ -0,0 +1 @@
+require('./hello_world');
diff --git a/app/assets/javascripts/webpack/hello_world.js b/app/assets/javascripts/webpack/hello_world.js
new file mode 100644
index 00000000000..5be69b187fd
--- /dev/null
+++ b/app/assets/javascripts/webpack/hello_world.js
@@ -0,0 +1,3 @@
+/* eslint-disable no-console */
+
+console.log('hello world!');
diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml
index 3096f0ee19e..87aadfb1bf5 100644
--- a/app/views/layouts/_head.html.haml
+++ b/app/views/layouts/_head.html.haml
@@ -29,6 +29,7 @@
   = stylesheet_link_tag "print",       media: "print"
 
   = javascript_include_tag "application"
+  = javascript_include_tag *webpack_asset_paths("bundle")
 
   - if content_for?(:page_specific_javascripts)
     = yield :page_specific_javascripts
diff --git a/config/application.rb b/config/application.rb
index d36c6d5c92e..02839dba1ed 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -80,6 +80,11 @@ module Gitlab
     # like if you have constraints or database-specific column types
     # config.active_record.schema_format = :sql
 
+    # Configure webpack
+    config.webpack.config_file = "config/webpack.config.js"
+    config.webpack.output_dir  = "public/assets/webpack"
+    config.webpack.public_path = "assets/webpack"
+
     # Enable the asset pipeline
     config.assets.enabled = true
     config.assets.paths << Gemojione.images_path
diff --git a/config/webpack.config.js b/config/webpack.config.js
new file mode 100644
index 00000000000..ea51c9d1af7
--- /dev/null
+++ b/config/webpack.config.js
@@ -0,0 +1,46 @@
+'use strict';
+
+var path = require('path');
+var webpack = require('webpack');
+var StatsPlugin = require('stats-webpack-plugin');
+
+var IS_PRODUCTION = process.env.NODE_ENV === 'production';
+var ROOT_PATH = path.resolve(__dirname, '..');
+
+// must match config.webpack.dev_server.port
+var DEV_SERVER_PORT = 3808;
+
+var config = {
+  context: ROOT_PATH,
+  entry: {
+    bundle: './app/assets/javascripts/webpack/bundle.js'
+  },
+
+  output: {
+    path: path.join(ROOT_PATH, 'public/assets/webpack'),
+    publicPath: '/assets/webpack/',
+    filename: IS_PRODUCTION ? '[name]-[chunkhash].js' : '[name].js'
+  },
+
+  plugins: [
+    // manifest filename must match config.webpack.manifest_filename
+    // webpack-rails only needs assetsByChunkName to function properly
+    new StatsPlugin('manifest.json', {
+      chunkModules: false,
+      source: false,
+      chunks: false,
+      modules: false,
+      assets: true
+    })
+  ]
+}
+
+if (!IS_PRODUCTION) {
+  config.devServer = {
+    port: DEV_SERVER_PORT,
+    headers: { 'Access-Control-Allow-Origin': '*' }
+  };
+  config.output.publicPath = '//localhost:' + DEV_SERVER_PORT + config.output.publicPath;
+}
+
+module.exports = config;
diff --git a/package.json b/package.json
index 49b8210e427..de199c269db 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,16 @@
 {
   "private": true,
   "scripts": {
+    "dev-server": "node_modules/.bin/webpack-dev-server --config config/webpack.config.js",
     "eslint": "eslint --max-warnings 0 --ext .js,.js.es6 .",
     "eslint-fix": "npm run eslint -- --fix",
     "eslint-report": "npm run eslint -- --format html --output-file ./eslint-report.html"
   },
+  "dependencies": {
+    "stats-webpack-plugin": "^0.4.2",
+    "webpack": "^1.13.2",
+    "webpack-dev-server": "^1.16.2"
+  },
   "devDependencies": {
     "eslint": "^3.10.1",
     "eslint-config-airbnb-base": "^10.0.1",