webpack.ProvidePlugin

I need to inject React variable to each module. In pure webpack solution it would be like that:

plugins: [
        new webpack.ProvidePlugin({
            'React': 'react'
        })
    ],

but webpack-stream have no ProvidePlugin method. Also, I dont want to make another dependence on webpack just for global React var.

How can I use webpack.ProvidePlugin?

[Kwapi]

For future reference, I managed to solve my issue by changing my code to this:

const webpack = require('webpack'); 
const webpackStream = require('webpack-stream');
const compiler = require('webpack')

gulp.task('js', ['clean-js'], function () {
    return gulp.src(config.theme.path + 'src/js/app.js')
        .pipe(plumber())
        .pipe(webpackStream(
            {
                mode: 'development',
                devtool: 'source-map',
                plugins: [
                    new webpack.ProvidePlugin({
                        $: 'jquery',
                        jQuery: 'jquery',
                        'window.jQuery': 'jquery'
                    }),
                ],

                output: {
                    filename: '[name].[contenthash].js'
                },

                /* config */
            }, compiler, function(err, stats) {
                /* Use stats to do more things if needed */
            }))
        .pipe(gulp.dest(config.theme.path + 'assets/js/'))
})

The key was to rename the original webpack variable to webpackStream and additionally import a new webpack variable from webpack. That way I can access the ProvidePlugin class.

Now my scripts can see jQuery. I hope that helps someone who’s in a similar situation

[blachawk]

• As of 2022, install webpack as a npm dependency!
• Next, pipe in webpack stream as normal, but this time try setting the config value to require webpack.config.js like so…

...
  .pipe(gulpif(PRODUCTION, webpack({
            config: require('./webpack.config.js'),
            })
        ))
...

Then within webpack.config.js you can rock and roll…

// webpack.config.js
const webpack = require('webpack')

const paths = {
  scripts: {
      src: ['src/scripts/js_bundle.js'],
      dest: './pub/scripts'
  },
  scriptsFlexslider: {
      src: ['src/scripts/js_bundle_flexslider.js'],
      dest: './pub/scripts'
  }
};

module.exports = {
  entry: {
    js_bundle: './' + paths.scripts.src,
    js_bundle_flexslider: './' + paths.scriptsFlexslider.src
  },
  mode: 'development',
  devtool: 'source-map',
  output: { }, //using gulp to pipe my dest's
  plugins: [  //...or whatever plugin react logic you need here!
    new webpack.ProvidePlugin({
      'window.jQuery'    : 'jquery',
      'window.$'         : 'jquery',
      'jQuery'           : 'jquery',
      '$'                : 'jquery'
    })
  ]
}

I find myself doing it this way only if I need plugin support through webpack stream!