How to config minified React+ReactDOM with Webpack

Question

After too many unsuccessful trials my question is: What is the proper way to setup Webpack so that:

1. Use react.min.js + react-dom.min.js - not the npm installed sources
2. Don't parse/com them again, just bundle with my own components.
3. "React" and "ReactDOM" variables can be used from all .jsx files.

The tutorials and guides I found didn't work - or maybe I did some errors. Usually I got error in browser developer tools about missing variable React.

My aim is just to save parsing/bundling time. Now I parse React from scratch every time I bundle my app. And it takes tens of seconds on a slowish computer. In watch mode it is faster, but I find I'm doing unnecessary work.

Any ideas with recent React versions?

Answer 1

Assuming you have a webpack.config.js that looks something like this:

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            ...
        ]
    }
};

You just need to specify React and ReactDOM as external dependencies (from the docs):

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            ...
        ]
    },
    externals: {
        // "node/npm module name": "name of exported library variable"
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

The key point about the externals section is that the key is the name of the module you want to reference, and the value is the name of the variable that the library exposes when used in a <script> tag.

In this example, using the following two script tags:

<script src="https://fb.me/react-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>

results in two top-level variables being created: React and ReactDOM.

With the above externals configuration, anytime in your source code you have a require('react'), it will return the value of the global variable React instead of bundling react with your output.

However, in order to do this the page that includes your bundle must include the referenced libraries (in this case react and react-dom) before including your bundle.

Hope that helps!

---

*edit*

Okay I see what you're trying to do. The webpack configuration option you want is module.noParse.

This disables parsing by webpack. Therefore you cannot use dependencies. This may be useful for prepackaged libraries.

For example:

{
    module: {
        noParse: [
            /XModule[\\\/]file\.js$/,
            path.join(__dirname, "web_modules", "XModule2")
        ]
    }
}

So you'd have your react.min.js, react-dom.min.js, and jquery.min.js files in some folder (say ./prebuilt), and then you'd require them like any other local module:

var react = require('./prebuilt/react.min');

And the entry in webpack.config.js would look something like this (untested):

{
    module: {
        noParse: [
            /prebuilt[\\\/].*\.js$/
        ]
    }
}

The [\\\/] mess is for matching paths on both Windows and OSX/Linux.