Using webpack with gulp

gulpfile.js

const gulp = require('gulp');
const gutil = require('gulp-util');
const webpack = require("webpack");
const WebpackDevServer = require("webpack-dev-server");


gulp.task("webpack", (callback) => {
  const config = require('./webpack.config')('development');
  const compiler = webpack(config);

  compiler.run((err, stats) => {
    if (err || stats.hasErrors()) {
      gutil.error('[webpack]', err.message);
    }

    gutil.log('[webpack]', stats.toString({
      chunks: false,
      colors: true
    }));

    callback();
  });

});

gulp.task("webpack-dev-server", (callback) => {
  const config = require('./webpack.config')('development');
  const compiler = webpack(config);
  const server = new WebpackDevServer(compiler, config.devServer);
  
  server.listen(config.devServer.port, "localhost", function (err) {
    if (err) throw new gutil.PluginError("webpack-dev-server", err);
    // Server listening
    gutil.log("[webpack-dev-server]", `http://localhost:${config.devServer.port}/`);

    // keep the server alive or continue?
    // callback();
  });
})

webpack.config.js

const webpack = require('webpack');
const path = require('path');

const sourcePath = path.join(__dirname, './src');
const destPath = path.join(__dirname, './build');

module.exports = function (env) {
  const nodeEnv = env && env.prod ? 'production' : 'development';
  const isProd = nodeEnv === 'production';

  const plugins = [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity,
      filename: 'vendor.bundle.js'
    }),
    new webpack.EnvironmentPlugin({
      NODE_ENV: nodeEnv,
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.$": "jquery",
      "window.jQuery": "jquery"
    })
  ];

  if (isProd) {
    plugins.push(
      new webpack.LoaderOptionsPlugin({
        minimize: true,
        debug: false
      }),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false,
          screw_ie8: true,
          conditionals: true,
          unused: true,
          comparisons: true,
          sequences: true,
          dead_code: true,
          evaluate: true,
          if_return: true,
          join_vars: true,
        },
        output: {
          comments: false,
        },
      })
    );
  } else {
    plugins.push(
      new webpack.HotModuleReplacementPlugin()
    );
  }

  return {
    devtool: isProd ? 'source-map' : 'eval',
    context: sourcePath,
    entry: {
      "main": sourcePath + '/bootstrap.ts',
      "vendor": [
        'angular',
        'ng-redux',
        'angular-ui-router',
        'restangular',
        'angular-jwt',
        'angularjs-viewhead',
        'angular-bootstrap',
        'tg-angular-validator',
        'angular-local-storage',
        'angular-uniform'
      ]
    },
    output: {
      path: destPath,
      filename: '[name].bundle.js',
    },
    module: {
      rules: [
        {
          test: /\.html$/,
          exclude: /node_modules/,
          loader: 'html-loader'
        },
        {
          test: /\.scss$/,
          exclude: /node_modules/,
          use: [
            'style-loader',
            'css-loader',
            'sass-loader'
          ]
        },
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /\.ts$/,
          exclude: /node_modules/,
          use: [
            'ng-annotate-loader',
            'awesome-typescript-loader'
          ],
        },
        {
          test: /\.(png|jpg|gif|svg)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[name]-[sha512:hash:base64:7].[ext]',
                outputPath: 'images/'
              }
            }
          ]
        },
        {
          test: /\.(ttf|woff|eot)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[name]-[sha512:hash:base64:7].[ext]',
                outputPath: 'fonts/'
              }
            }
          ]
        }
      ],
    },
    resolve: {
      extensions: ['.js', '.ts'],
      modules: [
        path.resolve(__dirname, 'node_modules'),
        sourcePath
      ]
    },

    plugins,

    performance: isProd && {
      maxAssetSize: 100,
      maxEntrypointSize: 300,
      hints: 'warning',
    },

    stats: {
      colors: {
        green: '\u001b[32m',
      }
    },

    devServer: {
      contentBase: './build',
      historyApiFallback: true,
      port: 3000,
      compress: isProd,
      inline: !isProd,
      hot: !isProd,
      stats: {
        assets: false,
        children: false,
        chunks: true,
        hash: false,
        modules: false,
        publicPath: false,
        timings: true,
        version: false,
        warnings: true,
        colors: {
          green: '\u001b[32m',
        }
      },
    }
  };
};