[Project] Update webpack configuration, gulp

Author: oxyno-zeta

.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets":["es2015", "stage-0", "react"]
+  "presets":["es2015", "stage-0", "react"],
+  "plugins": ["transform-runtime"]
 }

gulp/config/webpack-dev.config.js

@@ -9,7 +9,6 @@
 /* ************************************* */
 const path = require('path');
 const webpack = require('webpack');
-const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpackCombineLoaders = require('webpack-combine-loaders');
 const autoprefixer = require('autoprefixer');
@@ -25,15 +24,17 @@ const ROOT_DIR = path.resolve(__dirname, '../..');
 /* ************************************* */
 
 module.exports = {
+    bail: true,
+    devtool: 'source-map',
     entry: {
         app: [
             path.join(APP_DIR, 'index.jsx'),
             path.join(APP_DIR, 'index.html'),
         ],
-        vendor: ['react', 'react-hotkeys'],
+        vendor: ['react', 'react-hotkeys', 'react-dom', 'lodash'],
     },
     resolve: {
-        extensions: ['', '.scss', '.css', '.js', '.json'],
+        extensions: ['', '.scss', '.sass', '.css', '.js', '.jsx', '.json'],
     },
     output: {
         path: BUILD_DIR,
@@ -43,7 +44,7 @@ module.exports = {
     module: {
         preLoaders: [
             {
-                test: /\.js$/,
+                test: /\.js(x|)$/,
                 loader: 'eslint',
                 include: [
                     SRC_DIR,
@@ -52,7 +53,7 @@ module.exports = {
         ],
         loaders: [
             {
-                test: /\.js?/,
+                test: /\.js(x|)?/,
                 exclude: /node_modules/,
                 loader: 'babel',
             },
@@ -113,6 +114,8 @@ module.exports = {
     },
     eslint: {
         configFile: path.join(ROOT_DIR, '.eslintrc.json'),
+        failOnWarning: true,
+        failOnError: true,
     },
     postcss: [
         autoprefixer({
@@ -131,9 +134,5 @@ module.exports = {
             filename: 'index.html',
             template: path.join(APP_DIR, 'index.html'),
         }),
-        //new ProgressBarPlugin(),
-        new webpack.optimize.DedupePlugin(),
-        new webpack.HotModuleReplacementPlugin(),
-        new webpack.NoErrorsPlugin(),
     ],
 };

gulp/config/webpack-prod.config.js

@@ -25,15 +25,17 @@ const ROOT_DIR = path.resolve(__dirname, '../..');
 /* ************************************* */
 
 module.exports = {
+    bail: true,
+    devtool: 'cheap-module-source-map',
     entry: {
         app: [
             path.join(APP_DIR, 'index.jsx'),
             path.join(APP_DIR, 'index.html'),
         ],
-        vendor: ['react', 'react-hotkeys'],
+        vendor: ['react', 'react-hotkeys', 'react-dom', 'lodash'],
     },
     resolve: {
-        extensions: ['', '.scss', '.css', '.js', '.json'],
+        extensions: ['', '.scss', '.sass', '.css', '.js', '.jsx', '.json'],
     },
     output: {
         path: BUILD_DIR,
@@ -42,7 +44,7 @@ module.exports = {
     module: {
         preLoaders: [
             {
-                test: /\.js$/,
+                test: /\.js(x|)$/,
                 loader: 'eslint',
                 include: [
                     SRC_DIR,
@@ -51,7 +53,7 @@ module.exports = {
         ],
         loaders: [
             {
-                test: /\.js?/,
+                test: /\.js(x|)$/,
                 exclude: /node_modules/,
                 loader: 'babel',
             },
@@ -109,6 +111,8 @@ module.exports = {
     },
     eslint: {
         configFile: path.join(ROOT_DIR, '.eslintrc.json'),
+        failOnWarning: true,
+        failOnError: true,
     },
     postcss: [
         autoprefixer({
@@ -130,6 +134,13 @@ module.exports = {
         new ExtractTextPlugin('[name]-[hash:5].css'),
         new webpack.optimize.DedupePlugin(),
         new webpack.optimize.OccurrenceOrderPlugin(),
-        new webpack.optimize.UglifyJsPlugin({}),
+        new webpack.optimize.UglifyJsPlugin({
+            compressor: {
+                warnings: false,
+                dead_code: true,
+                unused: true,
+            },
+            minimize: true,
+        }),
     ],
 };

gulp/config/webpack-serve.config.js

@@ -9,18 +9,24 @@
 /* ************************************* */
 const fs = require('fs');
 const path = require('path');
+const webpack = require('webpack');
+const WebpackBrowserPlugin = require('webpack-browser-plugin');
 const configDev = require('./webpack-dev.config');
 
 const babelrcString = fs.readFileSync(path.resolve(__dirname, '../../.babelrc'));
 const babelrc = JSON.parse(babelrcString.toString());
 
 // Update
+configDev.bail = false;
 configDev.module.preLoaders = [];
 configDev.module.loaders[0].query = babelrc;
 configDev.module.loaders[0].query.presets.push('react-hmre');
 configDev.module.loaders[0].query.babelrc = false;
 configDev.entry.app.push('webpack-dev-server/client?http://localhost:8080');
 configDev.entry.app.push('webpack/hot/only-dev-server');
+configDev.plugins.push(new webpack.NoErrorsPlugin());
+configDev.plugins.push(new webpack.HotModuleReplacementPlugin());
+configDev.plugins.push(new WebpackBrowserPlugin());
 
 /* ************************************* */
 /* ********       EXPORTS       ******** */

gulp/web.js

@@ -8,7 +8,6 @@
 /* ********       REQUIRE       ******** */
 /* ************************************* */
 const gulp = require('gulp');
-const webpackStream = require('webpack-stream');
 const webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
 
@@ -21,16 +20,19 @@ const WebpackDevServer = require('webpack-dev-server');
 /* ********   PUBLIC FUNCTIONS  ******** */
 /* ************************************* */
 
-gulp.task('web:build:dev', () => {
-    gulp.src('src/dev/index.jsx')
-        .pipe(webpackStream(require('./config/webpack-dev.config')))
-        .pipe(gulp.dest('dev_build/'));
+gulp.task('web:build:dev', (done) => {
+    webpack(require('./config/webpack-dev.config'), done);
 });
 
-gulp.task('web:build:prod', () => {
-    gulp.src('src/dev/index.jsx')
-        .pipe(webpackStream(require('./config/webpack-prod.config')))
-        .pipe(gulp.dest('docs/'));
+gulp.task('web:build:prod', (done) => {
+    webpack(require('./config/webpack-prod.config'), (err, stats) => {
+        if (err) {
+            return done(err);
+        }
+
+        console.log(stats.toString());
+        done();
+    });
 });
 
 gulp.task('web:serve', (done) => {

package.json

@@ -26,6 +26,7 @@
     "autoprefixer": "^6.5.3",
     "babel-core": "^6.18.2",
     "babel-loader": "^6.2.8",
+    "babel-plugin-transform-runtime": "^6.15.0",
     "babel-preset-es2015": "^6.13.2",
     "babel-preset-react": "^6.11.1",
     "babel-preset-react-hmre": "^1.1.1",
@@ -48,7 +49,6 @@
     "lodash": "^4.17.2",
     "node-sass": "^3.13.0",
     "postcss-loader": "^1.1.1",
-    "progress-bar-webpack-plugin": "^1.9.0",
     "react": "^15.4.0",
     "react-dom": "^15.4.0",
     "react-hot-loader": "^1.3.0",
@@ -57,9 +57,9 @@
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
     "webpack": "^1.13.2",
+    "webpack-browser-plugin": "^1.0.12",
     "webpack-combine-loaders": "^2.0.3",
-    "webpack-dev-server": "^1.14.1",
-    "webpack-stream": "^3.2.0"
+    "webpack-dev-server": "^1.14.1"
   },
   "peerDependencies": {
     "react": "^15.4.0",