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

.eslintignore

+/builds/
 /coverage/
 /coverage-javascript/
 /node_modules/
 /public/
 /tmp/
 /vendor/
-/builds/
+webpack.config.js

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'

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

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

app/assets/javascripts/webpack/bundle.js

+require('./hello_world');

app/assets/javascripts/webpack/hello_world.js

+/* eslint-disable no-console */
+
+console.log('hello world!');

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

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

config/webpack.config.js

+'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;

package.json

 {
   "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",