How to use gulp webpack-stream to generate a proper named file?

Question

Currently we're using Webpack for our Module loader, and Gulp for everything else (sass -> css, and the dev/production build process)

I want to wrap the webpack stuff into gulp, so all I have to do is type gulp and it starts, watches and runs webpack and the rest of what our gulp is setup to do.

So I found webpack-stream and implemented it.

gulp.task('webpack', function() {
    return gulp.src('entry.js')
        .pipe(webpack({
            watch: true,
            module: {
                loaders: [
                    { test: /\.css$/, loader: 'style!css' },
                ],
            },
        }))
        .pipe(gulp.dest('dist/bundle.js'));
});

The problem is that it generates a random character name for the .js file, how are we suppose to use that in our app?

From the github repo:

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).

How do you rename these files? Also the new gulp task generates a new file everytime I save an edit:

I can't use c2212af8f732662acc64.js I need it to be named bundle.js or something else normal.

Our Webpack config:

var webpack = require('webpack');
var PROD = JSON.parse(process.env.PROD_DEV || '0');
// http://stackoverflow.com/questions/25956937/how-to-build-minified-and-uncompressed-bundle-with-webpack

module.exports = {
    entry: "./entry.js",
    devtool: "source-map",
    output: {
        devtoolLineToLine: true,
        sourceMapFilename: "app/assets/js/bundle.js.map",
        pathinfo: true,
        path: __dirname,
        filename: PROD ? "app/assets/js/bundle.min.js" : "app/assets/js/bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    },
    plugins: PROD ? [
        new webpack.optimize.UglifyJsPlugin({minimize: true})
    ] : []
};

Answer 1

There was a comment to Leon Gaban's answer as to what his webpack.config.js looked like. Rather than answer that within a comment, I'm providing it here so it formats better.

Per the docs for webpack-stream, "You can pass webpack options in with the first argument"...

So, I did the following to force webpack to use the same output name each time (for me, I used bundle.js):

gulp.task('webpack', ['babelify'],
    () => {
        return gulp.src('Scripts/index-app.js')
            .pipe(webpack({output: {filename: 'bundle.js'} }))
            .pipe(debug({ title: 'webpack:' }))
            .pipe(gulp.dest('Scripts/'));

    });

The key being the options inside webpack(), which are:

{output: {filename: 'bundle.js'} }

Answer 2

Ah I read on a bit further and figured it out:

gulp.task('webpack', function() {
    return gulp.src('entry.js')
    .pipe(webpack( require('./webpack.config.js') ))
    .pipe(gulp.dest('app/assets/js'));
});

^ here I can just pass in my actual webpack.config and it will use the paths I have already set in there. In my case I just removed app/assets/js since I have that path in now gulp instead.

Still no earthly idea though, why with the first task I created, it generates random hash filenames?

Answer 3

As recommended in docs you should use the vinyl-named package on the pipe before webpack-stream. This way you can use a more cleaner Webpack configuration. The following is the task definition i use myself:

'use strict';

const gulp = require('gulp'),
      named = require('vinyl-named'),
      webpack = require('webpack-stream');

gulp.task('webpack', function () {
  gulp.src(['./src/vendor.js', './src/bootstrap.js', './src/**/*.spec.js'])
      .pipe(named())
      .pipe(webpack({
        module: {
          loaders: [
            {
              test: /\.js$/,
              loader: 'babel',
              query: {
                presets: ['es2015', 'angular2']
              }
            }
          ]
        }
      }))
      .pipe(gulp.dest('./build'))
});

The only problem i'm facing with this task definition is that the subfolder are loosed. For example ./src/components/application.spec.js will produce ./build/application.spec.js instead of ./build/components/application.spec.js.

Answer 4

Rather than giving your javascript a fixed filename, a better solution would be to use gulp-inject and insert the generated hash filename into a script tag. This means you don't have to worry about cache expiry on the compiled javascript (which is why the hash filename is being used in the first place).

const inject = require('gulp-inject');

gulp.task('webpack', function() {
    const index = './src/index.html';
    const scripts = gulp.src('entry.js')
    .pipe(webpack( require('./webpack.config.js') ))
    .pipe(gulp.dest('dist/js'));

    return target
       .pipe(inject(scripts))
       .pipe(gulp.dest('dist/'));
});

and of course you need the inject section in your src/index.html:

<!DOCTYPE html>
<html>
<head>
  <title>index page</title>
</head>
<body>

  <!-- inject:js -->
  <!-- endinject -->
</body>
</html>