Gulp/Babel-loader and Webpack in Visual Studio Code

Sample VS Code config files for gulp-babel-loader.

gulpfile.js

These two lines aren’t needed in node gulp apps, but they make errors (cannot resolve module ‘myModule’…) in VS Code.

...
    root: path.join(__dirname),
    fallback: path.join(__dirname, 'node_modules'),
...

...

root: path.join(__dirname),

fallback: path.join(__dirname, 'node_modules'),

...

/* global __dirname */
'use strict';
let path = require('path');
let gulp = require('gulp');
let webpack = require('webpack-stream');
let uglify = require('gulp-uglify');
var watch = require('gulp-watch');

gulp.task('frontend', function(){
	
	watch(['src/**/*.js'], function(){
		gulp.src('src/**/*.js')
			.pipe(webpack({
				module:{
					loaders:[
						{
							test: /\.jsx?$/,
							loader: 'babel',
							query: {
								presets: ['react', 'es2015']
							},
							resolve: {
								root: path.join(__dirname),
								fallback: path.join(__dirname, 'node_modules'),
								modulesDirectories: ['node_modules'],
								extensions: ['', '.json', '.js', '.jsx', '.scss', '.png', '.jpg', '.jpeg', '.gif']
							}
						},
					]
				},
				output: {
					filename: "bundle.js"
				}
			}))
			.pipe(uglify())
			.pipe(gulp.dest('public/js'))
	});
});

/* global __dirname */

'use strict';

let path = require('path');

let gulp = require('gulp');

let webpack = require('webpack-stream');

let uglify = require('gulp-uglify');

var watch = require('gulp-watch');

gulp.task('frontend', function(){

watch(['src/**/*.js'], function(){

gulp.src('src/**/*.js')

.pipe(webpack({

module:{

loaders:[

{

test: /\.jsx?$/,

loader: 'babel',

query: {

presets: ['react', 'es2015']

resolve: {

root: path.join(__dirname),

fallback: path.join(__dirname, 'node_modules'),

modulesDirectories: ['node_modules'],

extensions: ['', '.json', '.js', '.jsx', '.scss', '.png', '.jpg', '.jpeg', '.gif']

}

]

output: {

filename: "bundle.js"

}

}))

.pipe(uglify())

.pipe(gulp.dest('public/js'))

});

package.json

{
	"dependencies": {
		"jquery": "^2.1.4",
		"react": "^0.14.3",
		"react-dom": "^0.14.3"
	},
	"devDependencies": {
		"gulp": "^3.9.0",
		"webpack-stream": "^2.2.0",
		"babel-loader": "^6.2.0",
		"babel-preset-react": "^6.1.18",
		"babel-preset-es2015": "^6.1.18",
		"gulp-sass": "^2.1.0",
		"gulp-uglify":"^1.5.1",
		"gulp-watch": "^4.3.5"
	}
}

{

"dependencies": {

"jquery": "^2.1.4",

"react": "^0.14.3",

"react-dom": "^0.14.3"

"devDependencies": {

"gulp": "^3.9.0",

"webpack-stream": "^2.2.0",

"babel-loader": "^6.2.0",

"babel-preset-react": "^6.1.18",

"babel-preset-es2015": "^6.1.18",

"gulp-sass": "^2.1.0",

"gulp-uglify":"^1.5.1",

"gulp-watch": "^4.3.5"

}

tsd.json

{
  "version": "v4",
  "repo": "borisyankov/DefinitelyTyped",
  "ref": "master",
  "path": "typings",
  "bundle": "typings/tsd.d.ts",
  "installed": {
    "express/express.d.ts": {
      "commit": "fb2b3b1e068c9ff7d8f9b0851c08d37d96c95c38"
    },
    "mime/mime.d.ts": {
      "commit": "fb2b3b1e068c9ff7d8f9b0851c08d37d96c95c38"
    },
    "serve-static/serve-static.d.ts": {
      "commit": "fb2b3b1e068c9ff7d8f9b0851c08d37d96c95c38"
    },
    "node/node.d.ts": {
      "commit": "fb2b3b1e068c9ff7d8f9b0851c08d37d96c95c38"
    },
    "gulp/gulp.d.ts": {
      "commit": "fb2b3b1e068c9ff7d8f9b0851c08d37d96c95c38"
    },
    "q/Q.d.ts": {
      "commit": "fb2b3b1e068c9ff7d8f9b0851c08d37d96c95c38"
    },
    "orchestrator/orchestrator.d.ts": {
      "commit": "fb2b3b1e068c9ff7d8f9b0851c08d37d96c95c38"
    },
    "gulp-uglify/gulp-uglify.d.ts": {
      "commit": "fb2b3b1e068c9ff7d8f9b0851c08d37d96c95c38"
    }
  }
}

{

"version": "v4",

"repo": "borisyankov/DefinitelyTyped",

"ref": "master",

"path": "typings",

"bundle": "typings/tsd.d.ts",

"installed": {

"express/express.d.ts": {