JavaScript series article: React summary of the Webpack module organization

Modern front-end development can not be separated from packaging tools, to Webpack as the representative of the packaging tool has become the daily development of the necessary tools to react technology stack, for example, we ES6 the form of source code, need to be webpack and Babel processing, to generate a release version of the file, in the browser to run. Today, combine react to comb the structure of the module when Webpack is packaged, given the following simple application example:

Import React from ‘react‘;
Import ReactDOM from ‘react-dom‘;

Import {greet} from ‘./utils‘;

Const App = <h1>{greet(‘scott‘)}</h1>;

ReactDOM.render(App, document.getElementById(‘root‘));
The utils module in the code is as follows:

Export function greet(name) {
  Return `hello ${name}`;
}
If you compile the sample code, because you want to package the third-party libraries together, the final generated target code will be more, so we first configure React and ReactDOM as externals in webpack.config.prod.js, do not compile them to the target. In the code, it is taken directly from the outside at runtime. The configuration is as follows:

Let appConfig = {
  Entry: ‘./src/index.js‘,
  Externals: {
    ‘react’: ‘React’,
    ‘react-dom’: ‘ReactDOM’,
  },
  Output: {
    Path: ‘./dist‘,
    Filename: ‘index.js‘
  },
  Module: {
    Loaders: [
      {
        Test: /\.js$/,
        Exclude: /node_modules/,
        Loader: ‘babel-loader‘
      }
    ]
  },
};
Run webpack, the generated target code is as follows:

(function (modules) {
  / / Store the loaded module
  Var installedModules = {};

  // load function
  Function __webpack_require__(moduleId) {
    // If the module has been loaded, return directly to module.exports
    If (installedModules[moduleId]) {
      Return installedModules[moduleId].exports;
    }

    Var module = installedModules[moduleId] = {
      Exports: {},
      Id: moduleId,
      Loaded: false
    };

    / / Call the module function to load the corresponding module
    // The argument is (module, exports[, __webpack_require__])
    Modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

    // mark that the module has been loaded
    Module.loaded = true;

    // Finally returning exports
    Return module.exports;
  }

  // expose modules and installedModules objects
  __webpack_require__.m = modules;
  __webpack_require__.c = installedModules;

  // __webpack_public_path__
  __webpack_require__.p = "";

  / / Load the main module
  Return __webpack_require__(0);
})
/* The following is a list of modules that are loaded as parameters */
([
  /* 0 main module */
  (function (module, exports, __webpack_require__) {
    ‘use strict‘;

    // Take the React module with index 1
    Var _react = __webpack_require__(1);

    Var _react2 = _interopRequireDefault(_react);

    // Take the ReactDOM module with index 2
    Var _reactDom = __webpack_require__(2);

    Var _reactDom2 = _interopRequireDefault(_reactDom);

    / / Take the utils module with index 3
    Var _utils = __webpack_require__(3);

    // Module value does not contain __esModule: true is the default export
    Function _interopRequireDefault(obj) {
      Return obj && obj.__esModule ? obj : { default: obj };
    }

    / / Start rendering view
    
    Var App = _react2.default.createElement(
      ‘h1’,
      Null,
      (0, _utils.greet)(‘scott‘)
    );

    _reactDom2.default.render(App, document.getElementById(‘root‘));
  }),
  /* 1 React module */
  (function (module, exports) {
    Module.exports = React;
  }),
  /* 2 ReactDOM module */
  (function (module, exports) {
    Module.exports = ReactDOM;
  }),
  /* 3 utils module */
  (function (module, exports) {
    "use strict";

    Object.defineProperty(exports, "__esModule", {
      Value: true
    });
    
    Exports.greet = greet;
    
    Function greet(name) {
      Return "hello " + name;
    }
  })
]);
The above is the basic module loading mechanism. In fact, with the externals configuration, we can also not introduce React and React-DOM in the code, modify the code slightly below:

Import {greet} from ‘./utils‘;

Const App = <h1>{greet(‘scott‘)}</h1>;

ReactDOM.render(App, document.getElementById(‘root‘));
The translated code is as follows:

(function (modules) {
  // ...
})
/* The following is a list of modules that are loaded as parameters */
([
  /* 0 main module */
  (function (module, exports, __webpack_require__) {
    ‘use strict‘;

    / / Take the utils module with index 1
    Var _utils = __webpack_require__(1);

    / / Start rendering view
    
    Var App = React.createElement(
      ‘h1’,
      Null,
      (0, _utils.greet)(‘scott‘)
    );

    ReactDOM.render(App, document.getElementById(‘root‘));
  }),
  /* 1 utils module */
  (function (module, exports) {
    "use strict";

    Object.defineProperty(exports, "__esModule", {
      Value: true
    });
    
    Exports.greet = greet;
    
    Function greet(name) {
      Return "hello " + name;
    }
  })
]);
As you can see, the code is clear. The main module directly calls React.createElement() to create the virtual DOM object, and finally calls the ReactDOM.render() method to render the real DOM node. By accessing the entry file below, we can see the results of the program run:

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script src="index.js"></script>
  </body>
</html>
JavaScript series: React summarizes the Webpack module organization