How to use gulp webpack-stream to create proper file name?

Question

We are currently 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 in gulp, so all I have to do is type gulp and it starts, looks through and starts webpack, and the rest of our gulp is the setup.

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 symbol name for the .js file, how can we use this in our application?

From the github repository :

The above will compile src / entry.js into assets using webpack in dist / with the output file name [hash] .js (created using the webpack hash of the assembly).

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

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

Our webpack configurator:

 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

And I read a little further and realized:

 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 that I already installed there. In my case, I just deleted app/assets/js , since now I have this path now gulp.

However, there is no earthly idea why, with the first task I created, it generates random hash file names?

Answer 2

There was an answer by Leon Gaban to the question of what his webpack.config.js looks like. Instead of responding to this in a comment, I provide it here to make it format better.

In the docs for webpack-stream , you can pass webpack parameters with the first argument "...

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

 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 is the parameters inside webpack (), which:

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

Answer 3

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

 '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 encounter with this task definition is that the subfolder is freed. For example, ./src/components/application.spec.js will produce ./build/application.spec.js instead of ./build/components/application.spec.js .

Answer 4

Instead of giving your javascript a fixed file name, the best solution would be to use gulp-inject and insert the generated hash file name in the script tag. This means that you don’t have to worry about cache expiration on compiled javascript (which is why the hash file name is 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 will need the injection section in src/index.html :

 <!DOCTYPE html> <html> <head> <title>index page</title> </head> <body> <!-- inject:js --> <!-- endinject --> </body> </html>