Using webpack-5 results in no output files

[romehu2]

I'm using gulp and webpack-stream to build my react project into one .js file and I would like to break it down into multiple .js files. I specifically want to use the new webpack-5 entry options "input" and "dependOn" but I have discovered that using webpack-5 results in no output being generated.

Here is a minimal example of a gulpfile.js that recreates the issue. (I chose to have the webpack options in the gulp file and use lodash.clonedeep, instead of having a webpack.config.js file.) Note the optional 'webpack' constant being passed into webpackStream in the task's 'return' statement.

const gulp = require('gulp');
const cloneDeep = require('lodash.clonedeep');
const webpackStream = require('webpack-stream');
const webpack = require('webpack');

const webpackOptions = {
   devtool: 'inline-source-map',
   mode: 'development',
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: {
               loader: 'babel-loader',
               options: { presets: 
                  [  '@babel/preset-react'
                  ,  '@babel/env'
                  ,  { 'plugins': ['@babel/plugin-proposal-class-properties'] }
                  ] 
               }
            }
         },
         { test: /\.css$/, use: ['style-loader', 'css-loader'], }
      ]
   }
};

gulp.task('default', () => {
   let options = cloneDeep(webpackOptions);
   options['output'] = { filename: 'bundle.js' };

   return gulp.src('javascript/react/*.jsx')
      .pipe(webpackStream(options, webpack))
      .pipe(gulp.dest('javascript/dist', { mode: "0744" }));
});

At the CLI I make sure webpack-4 is installed (version 4.46.0), and then run the gulp file:

C:\workspaces\..\project>npm install webpack@4 -D
[output snipped]
C:\workspaces\..\project>gulp
[09:59:41] Using gulpfile C:\workspaces\..\project\gulpfile.js
[09:59:41] Starting 'default'...
[09:59:47] Version: webpack 4.46.0
Built at: 08/04/2021 9:59:47 AM
    Asset     Size  Chunks             Chunk Names
bundle.js  5.7 MiB    main  [emitted]  main
Entrypoint main = bundle.js
[09:59:47] Finished 'default' after 5.66 s

In File Explorer (Windows 10 x64) I see the file 'bundle.js' in the dist/ folder as expected. I delete the file, install webpack-5 (5.48.0) and rerun the gulp file:

C:\workspaces\..\project>npm install webpack@5 -D
[output snipped]
C:\workspaces\..\project>gulp
[10:05:19] Using gulpfile C:\workspaces\..\project\gulpfile.js
[10:05:19] Starting 'default'...
[10:05:28] asset bundle.js 4.98 MiB [emitted] (name: main)

webpack 5.48.0 compiled successfully
[10:05:28] Finished 'default' after 9.69 s

But now 'bundle.js' is not in the dist/ folder. It appears to have been created in memory only. I have also used the webpack 'entry' option but however I set it up, webpack-4 creates actual output while webpack-5 creates nothing.

[theproj3ct]

Yes same issue for me

[cocoviper]

I found the issue with Webpack 5 output. In the afterEmit hook on webpack 5 the file does not have the .emitted property. if (compilation.assets[outname].emitted) { var file = prepareFile(fs, compiler, outname); self.queue(file); }

If I have time I'll make a pull request

*** Edit : turns out I was using v 4 not v 7 which fixes webpack 5 issue

[romehu2]

@cocoviper, what exactly fixes the webpack 5 issue? What are you referring to that you used v4 instead of v7?

[romehu2]

Ah, webpack-stream version 7, of course. Can confirm this issue is fixed with webpack-stream v7. And v6.