Leon Gaban Leon Gaban - 1 year ago 180
Javascript Question

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

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

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')
watch: true,
module: {
loaders: [
{ test: /\.css$/, loader: 'style!css' },

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
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 Source

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

^ 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?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download