webpack2 /w gulp

gulpfile.js

'use strict';

const browserSync  = require( 'browser-sync' ).create();

const gulp         = require( 'gulp' );
const gulpif       = require( 'gulp-if' );
const rename       = require( 'gulp-rename' );
const uglify       = require( 'gulp-uglify' );

const webpack      = require( 'webpack' );
const webpackStream = require("webpack-stream");

const sass         = require( 'gulp-sass' );
const postcss      = require( 'gulp-postcss' );
const autoprefixer = require( 'autoprefixer' );
const csswring     = require( 'csswring' );
const plumber      = require( 'gulp-plumber' );

const runSequence  = require( 'run-sequence' ).use( gulp );

let isProd = true;

const AUTOPREFIXER_BROWSERS = {
	browsers: [
		'ie >= 9',
		'safari >= 7',
		'ios >= 7',
		'android >= 4',
	]
};

const webpackConfig = {
	watch: true,
  // entry: './src/js/main.js',
	resolve: {
		alias: {
			vue$: 'vue/dist/vue.esm.js'
		}
	},
	output: {
		filename: 'bundle.js',
	},
	module: {
		rules: [
			// { test: /\.vue$/, loader: 'vue-loader' },
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: [
					{
						loader: 'babel-loader',
						options: {
							presets: [ [
								'es2015',
								{
									'targets': {
										'browsers': [
											'last 2 versions',
											'ie >= 9'
										]
									},
									'loose': true,
									'modules': false
								}
							] ],
							plugins: [
								// for IE9
								// see https://gist.github.com/zertosh/4f818163e4d68d58c0fa
								'transform-proto-to-assign'
								// 'transform-object-assign'
							]
						}
					}
				]
			}
		]
	},
	plugins: [
		new webpack.DefinePlugin( {
			'process.env': { NODE_ENV: JSON.stringify( isProd ? 'production' : 'development' ) }
		} )
	],
}

if ( isProd ) {

	// Do this in gulp
	// webpackConfig.plugins.push(
	//   new webpack.LoaderOptionsPlugin( { minimize: true, debug: false } ),
	//   new webpack.optimize.UglifyJsPlugin()
	// );

} else {

	webpackConfig.plugins.push(
		new webpack.HotModuleReplacementPlugin()
	);

}


gulp.task( 'browser-sync', () => {

	browserSync.init( {
		server: {
			baseDir: '../',
			directory: true
		},
		startPath: '../'
	} );

} );


gulp.task( 'webpack', () => {

	return gulp.src( './src/js/main.js' )
		.pipe( webpackStream( webpackConfig, webpack ) )
		// .on( 'error', handleErrors )
		.pipe( gulp.dest( './js/' ) )
		.pipe( gulpif( isProd, uglify( { preserveComments: 'some' } ) ) )
		.pipe( rename( { extname: '.min.js' } ) )
		.pipe( gulp.dest( './js/' ) )
		.pipe( browserSync.reload( { stream: true } ) );

} );



gulp.task( 'sass', () => {

	const processors = [
		autoprefixer( AUTOPREFIXER_BROWSERS ),
		csswring
	];

	return gulp.src( './src/scss/main.scss' )
		.pipe( plumber( {
			errorHandler: ( err ) => {

				console.log( err.messageFormatted );
				this.emit( 'end' );

			}
		} ) )
		.pipe( sass() )
		.pipe( gulp.dest( './css/' ) )
		.pipe( rename( { extname: '.min.css' } ) )
		.pipe( postcss( processors ) )
		.pipe( gulp.dest( './css/' ) );

} );


gulp.task( 'watch', () => {

	gulp.watch( [ './src/scss/**/*.scss' ], () => {
		runSequence( 'sass', browserSync.reload );
	} );

} );


gulp.task( 'build', ( callback ) => {

	isProd = true;
	return runSequence( 'sass', 'webpack', callback );

} );

gulp.task( 'default', ( callback ) => {

	isProd = false;
	return runSequence( 'browser-sync', 'sass', 'webpack', 'watch', callback );

} );

package.json

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "scripts": {
    "start": "gulp",
    "build": "gulp build"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "^6.7.6",
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-plugin-transform-proto-to-assign": "^6.23.0",
    "babel-preset-es2015": "^6.22.0",
    "browser-sync": "^2.18.8",
    "csswring": "^5.1.1",
    "gulp": "^3.9.1",
    "gulp-if": "^2.0.2",
    "gulp-plumber": "^1.1.0",
    "gulp-postcss": "^6.3.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^2.0.1",
    "run-sequence": "^1.2.2",
    "webpack": "^2.2.1",
    "webpack-stream": "^3.2.0"
  },
  "dependencies": {
    "axios": "^0.15.3",
    "es6-promise": "^4.0.5",
    "vue": "^2.2.1"
  }
}