Need help understanding how gulp and webpack-stream works

Question

So I have a Gulp file (working) and a Webpack file (working). Now I want to combine these to so that I only have to run webpack in order to watch and compile SCSS files.

Looking at webpack home page I can use something called webpack-stream

var gulp = require('gulp'); var webpack = require('webpack-stream'); gulp.task('default', function() { return gulp.src('src/entry.js') .pipe(webpack()) .pipe(gulp.dest('dist/')); });

I don't understand what I'm reading here. And I'm not to familier with piping.
- The first piece of code, does this go into gulpfile.js?
- What is entry.js?
- What does this piece of code do?

The above will compile src/entry.js into assets with webpack into dist/ with the output filename of [hash].js (webpack generated hash of the build).

Or just pass in your webpack.config.js:

return gulp.src('src/entry.js') .pipe(webpack( require('./webpack.config.js') )) .pipe(gulp.dest('dist/'));

I'm guessing this goes into my gulpfile.js?

I think I need this handed to me with a tea spoon :-/

Update

I got it working with help from @kannix and @JMM. Here are my config files:

Gulp

var gulp = require('gulp'); var sass = require('gulp-sass'); var webpack = require('webpack-stream'); gulp.task('default', [ 'webpacker', 'sass', 'watch' ]); gulp.task('webpacker', function() { return gulp.src('./src/index.js') .pipe(webpack(require('./webpack.config.js'))) .pipe(gulp.dest('dist/')); }); gulp.task('sass', function () { return gulp .src('./src/sass/main.scss') .pipe(sass()) .pipe(gulp.dest('./css/')); }); gulp.task('watch', function() { gulp.watch('./src/sass/*.scss', ['sass']); gulp.watch('./src/components/*.jsx', ['webpacker']); });

webpack.config.js

var path = require('path'); var webpack = require('webpack'); module.exports = { entry: "./src/index.js", output: { path: __dirname + "/js/", filename: "bundle.js" }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { cacheDirectory: true, presets: ['es2015', 'react'] } } ] } };

kannix · Accepted Answer · 2016-05-03 13:32:32Z

gulp.task('default', function() { return gulp.src('src/entry.js') .pipe(webpack()) .pipe(gulp.dest('dist/')); });

Yes, this is code from gulpfile.js. This tells gulp to read src/entry.js and stream the content of the file to the webpack-stream gulp plugin. The output from webpack-stream is then written to dist/

entry.js is the webpack entry point

The second example does nearly the same but it will most likley read additional webpack configuration from your webpack.config.js

Thanks. Now I'm getting an error message. Could this be caused by my webpack config file? See my updated question.
most likely yes.. so please post your webpack config too... and perhaps you should try to get webpack running without gulp and if that works as expected you can start to integrate that in your gulp config ;)
Yeah it was. I had some Gulp config in there. It didn't like that. Removing this and it all works.

JMM · Accepted Answer · 2016-05-03 13:27:37Z

Yes, that code is designed for a gulpfile.
What is entry.js?

Ordinarily when bundling with something like Webpack you'll have a script that runs your app and is the entry to your dependency graph. That's what entry.js refers to.

What does this piece of code do?

Here's a commented version:

var gulp = require('gulp'); var webpack = require('webpack-stream'); gulp.task('default', function() { // Read `src/entry.js` in as a vinyl file return gulp.src('src/entry.js') // Send `entry.js` to this `webpack-stream` module. .pipe(webpack()) // Send the output of `webpack-stream` to `dist/` .pipe(gulp.dest('dist/')); });

Collectives™ on Stack Overflow

Need help understanding how gulp and webpack-stream works

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related