17

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:

enter image description here

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}) ] : [] };
Improve this question

4 Answers 4

Reset to default
13

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'} }
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

After much teeth-gnashing and web-searching, passing this simple config object was the simplest solution I found.
8

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.

Improve this answer

3 Comments

I like this solution as I do not have to type the name of my file twice, the vinyl-named package does it for me.
If someone is still reading this, you can use vinyl-named-with-path instead to save the subfolders
+1 for linking to vinyl-named which helped me in my case to allow multiple entry points without having to specify them in the webpack config obj
3

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?

Improve this answer

5 Comments

It is default value ('[hash].js') if no entry point is specified (in opposite case filename will be '[name].js') github.com/shama/webpack-stream/blob/master/index.js#L98
@leon gabam what did your webpack.config.js file look like?
Paul, please see my answer below which shows an example of the webpack.config.js options needed to force the same filename each time.
The random hash filename ensures that you pick up the correct version of the scripts when you update your production server and you've told everyone they can cache the old bundle for a year.
this should not be the accepted answer, it is vague and incomplete.
0

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>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.