Use webpack CLI instead of gulpfile.js

gulpfile.js

@@ -3,8 +3,6 @@
 var gulp = require('gulp');
 var prettify = require('gulp-jsbeautifier');
 var diff = require('gulp-diff');
-var webpack = require('webpack-stream');
-var named = require('vinyl-named');
 var esformatter = require('gulp-esformatter');
 var esformatter_origin = require('esformatter');
 var through = require('through2');
@@ -13,6 +11,8 @@ var electron = require('electron-connect').server.create({
 });
 
 const fs = require('fs');
+const path = require('path');
+const spawn = require('child_process').spawn;
 
 const distPackageAuthor = 'Mattermost, Inc.';
 
@@ -87,7 +87,7 @@ gulp.task('prettify:jsx:verify', function() {
 });
 
 
-gulp.task('build', ['sync-meta', 'webpack', 'copy'], function(cb) {
+gulp.task('build', ['sync-meta', 'copy'], function(cb) {
   const appPackageJson = require('./src/package.json');
   const distPackageJson = Object.assign({}, appPackageJson, {
     author: {
@@ -98,72 +98,6 @@ gulp.task('build', ['sync-meta', 'webpack', 'copy'], function(cb) {
   fs.writeFile('./dist/package.json', JSON.stringify(distPackageJson, null, '  '), cb);
 });
 
-gulp.task('webpack', ['webpack:main', 'webpack:browser', 'webpack:webview']);
-
-gulp.task('webpack:browser', function() {
-  return gulp.src('src/browser/*.jsx')
-    .pipe(named())
-    .pipe(webpack({
-      module: {
-        loaders: [{
-          test: /\.json$/,
-          loader: 'json'
-        }, {
-          test: /\.jsx$/,
-          loader: 'babel',
-          query: {
-            presets: ['react']
-          }
-        }]
-      },
-      output: {
-        filename: '[name].js'
-      },
-      node: {
-        __filename: false,
-        __dirname: false
-      },
-      target: 'electron-renderer'
-    }))
-    .pipe(gulp.dest('dist/browser/'));
-});
-
-gulp.task('webpack:main', function() {
-  return gulp.src('src/main.js')
-    .pipe(webpack({
-      module: {
-        loaders: [{
-          test: /\.json$/,
-          loader: 'json'
-        }]
-      },
-      output: {
-        filename: '[name].js'
-      },
-      node: {
-        __filename: false,
-        __dirname: false
-      },
-      target: 'electron-main',
-      externals: {
-        remote: true // for electron-connect
-      }
-    }))
-    .pipe(gulp.dest('dist/'));
-});
-
-gulp.task('webpack:webview', function() {
-  return gulp.src('src/browser/webview/mattermost.js')
-    .pipe(named())
-    .pipe(webpack({
-      output: {
-        filename: '[name].js'
-      },
-      target: 'electron'
-    }))
-    .pipe(gulp.dest('dist/browser/webview'));
-});
-
 gulp.task('copy', ['copy:resources', 'copy:html/css', 'copy:modules']);
 
 gulp.task('copy:resources', function() {
@@ -181,12 +115,29 @@ gulp.task('copy:modules', function() {
     .pipe(gulp.dest('dist/browser/modules/bootstrap'));
 });
 
-gulp.task('watch', ['build'], function() {
+function spawnWebpack(config, cb) {
+  const ext = process.platform === 'win32' ? '.cmd' : ''
+  spawn(path.resolve(`./node_modules/.bin/webpack${ext}`), ['--config', config], {
+    stdio: 'inherit'
+  }).on('exit', (code) => {
+    cb(code);
+  });
+}
+
+gulp.task('webpack:main', (cb) => {
+  spawnWebpack('webpack.config.main.js', cb);
+});
+
+gulp.task('webpack:renderer', (cb) => {
+  spawnWebpack('webpack.config.renderer.js', cb);
+});
+
+gulp.task('watch', ['build', 'webpack:main', 'webpack:renderer'], function() {
   var options = ['--livereload'];
   electron.start(options);
 
   gulp.watch(['src/main.js', 'src/main/**/*.js', 'src/common/**/*.js'], ['webpack:main']);
-  gulp.watch(['src/browser/**/*.js', 'src/browser/**/*.jsx'], ['webpack:browser', 'webpack:webview']);
+  gulp.watch(['src/browser/**/*.js', 'src/browser/**/*.jsx'], ['webpack:renderer']);
   gulp.watch(['src/browser/**/*.css', 'src/browser/**/*.html', 'src/resources/**/*.png'], ['copy']);
 
   gulp.watch(['dist/main.js', 'dist/resources/**'], function() {

package.json

@@ -19,7 +19,9 @@
   "scripts": {
     "install": "cd src && npm install",
     "postinstall": "npm run build",
-    "build": "gulp build",
+    "build": "npm run build:main && npm run build:renderer && gulp build",
+    "build:main": "cross-env NODE_ENV=production webpack --config webpack.config.main.js",
+    "build:renderer": "cross-env NODE_ENV=production webpack --config webpack.config.renderer.js",
     "start": "electron dist",
     "watch": "gulp watch",
     "serve": "gulp watch",
@@ -52,11 +54,8 @@
     "mocha": "^3.0.2",
     "mocha-circleci-reporter": "0.0.2",
     "spectron": "~3.4.0",
-    "style-loader": "^0.13.1",
     "through2": "^2.0.1",
-    "vinyl-named": "^1.1.0",
-    "webpack": "^1.13.1",
-    "webpack-stream": "^3.2.0"
+    "webpack": "^1.13.1"
   },
   "build": {
     "appId": "com.mattermost.desktop",

webpack.config.main.js

@@ -0,0 +1,20 @@
+module.exports = {
+  entry: './src/main.js',
+  output: {
+    filename: './dist/main.js'
+  },
+  module: {
+    loaders: [{
+      test: /\.json$/,
+      loader: 'json'
+    }]
+  },
+  node: {
+    __filename: false,
+    __dirname: false
+  },
+  target: 'electron-main',
+  externals: {
+    remote: true // for electron-connect
+  }
+};

webpack.config.renderer.js

@@ -0,0 +1,28 @@
+module.exports = {
+  entry: {
+    index: './src/browser/index.jsx',
+    settings: './src/browser/settings.jsx',
+    'webview/mattermost': './src/browser/webview/mattermost.js'
+  },
+  output: {
+    path: './dist/browser',
+    filename: '[name].js'
+  },
+  module: {
+    loaders: [{
+      test: /\.json$/,
+      loader: 'json'
+    }, {
+      test: /\.jsx$/,
+      loader: 'babel',
+      query: {
+        presets: ['react']
+      }
+    }]
+  },
+  node: {
+    __filename: false,
+    __dirname: false
+  },
+  target: 'electron-renderer'
+};