Why are we requiring React and ReactDOM as modules when working with Webpack? It takes long to produce output

Question

EDIT: I WAS WRONG. I'M USING GULP, WEBPACK AND BABEL, SEE MY ANSWER.

---

I've just begun learning React. Basically all tutorials I've seen use Webpack and babel.

Webpack and babel are great but why do most require react and react-dom as modules to be packaged with the webpack bundle file?:

var React = require('react');

var ReactDOM = require('react-dom');

The cdn files that we can load instead of making react go through webpack found right at the bottom of react's installation page https://facebook.github.io/react/docs/installation.html are much smaller than the react modules that webpack outputs (at least for me and I've done recommended optimizations).

The page has these script tags:

Development files (react 29kb, react-dom 137kb):

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

Production files (.min.js) (react 7kb, react-dom 36kb):

<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>

The production files total 43kb and the development files total 166kb. Using webpack I've managed to get react and react-dom down to 220kb.

For me it's not so much about the size of the files when they are loaded into the browser, at least not during development.

The cdn files will make React and ReactDOM global variables, which really is fine but I guess it would be nicer to have them be local to a module function like the tutorials, it's not like there's going to be a global identifier collision though. The problem is the fact that when we require the react.js npm module it itself has many requires in it and so on and it gets run through webpack and babel which takes a few seconds just to produce the bundle file each time we make a change during development because react is very big. The fact that we can minimize the output of react with webpack's config doesn't change the fact that webpack will take a while to produce the minimized output. When I make a simple change to my app.js and want the bundle file to be ready as quickly as possible.

If I use the react cdn files and only have my own app code be bundled with webpack a change in my app.js is pretty much bundled instantly as opposed to requiring react which will then take about 4-5 seconds to bundle.

Does anyone have a solution to this other than using the cdn? Could I possibly be using webpack in the wrong way?

Thanks!

Answer 1

Solved it!

As Lucas Katayama pointed out in a comment under my question, webpack dev server will only reprocess the files that have changed. Therefore it won't have to process React and ReactDOM more than once I believe.

I'm not using the webpack dev server. I don't want to. I'm simply using my own node server file and I'm using Gulp to do all the build of various things in my project. The bundling happens though webpack-stream https://www.npmjs.com/package/webpack-stream

What I was doing wrong was that I was watching all my javascript files for any changes and then running the whole webpack process every time (watching file changes using gulp-watch). This is what I had in my gulp file when it was running slow (reprocessing react):

var gulp = require('gulp');
var watch = require('gulp-watch');
var webpack = require('webpack-stream');
var webpackConfig = require('./webpack.config');
var browserSync = require('browser-sync').create();


gulp.task('js', function() {

    return watch('./src/js/**/*.js', function () {

        return gulp.src('./src/js/app.js')
            .pipe(webpack(webpackConfig))
            .pipe(gulp.dest('./dist/js/'))
            .pipe(browserSync.reload({stream: true}));

    });

});

What I had to do was stop watching my js files with gulp watch and I had to put a new option in my webpack.config.js file, the option's name is "watch" it has to be set to true. Now my gulp js task looks like this:

gulp.task('js', function() {

    return gulp.src('./src/js/app.js')
        .pipe(webpack(webpackConfig))
        .pipe(gulp.dest('./dist/js/'))
        .pipe(browserSync.reload({stream: true}));

});

My webpack.config.js file looks like this:

module.exports = {

  watch: true,

  output: {
      filename: "bundle.js"
  },

  module: {
      loaders: [
          {
              test: /\.jsx?$/,
              exclude: /(node_modules|bower_components)/,
              loader: "babel-loader",
              query: {
                  presets: ["latest", "react"],

                  plugins: [
                      "react-html-attrs",
                      "transform-class-properties",
                      "transform-decorators-legacy"
                  ]
              }
          }
      ]
  }

};

It is MUCH faster now. Thanks for the comment Lucas!