How to understand the front-end modular

Front-end is a modular complex programming a file a separate module , such as js files, etc., into separate modules beneficial reuse (reusability) and maintenance (version iteration), this will lead to problems interdependence among modules , so have commonJS specification, AMD, CMD specifications , etc., as well as for js package (compilation process) tool webpack

Talk about Commonjs, AMD and CMD

https://blog.csdn.net/ImagineCode/article/details/81590538

https://www.processon.com/view/link/5c8409bbe4b02b2ce492286a#map

A module is a file to achieve specific functions, with the module can easily use someone else's code, what function what you want to be able to load modules.

CMD (Common Module Definition), is the normalized output sea.js promotion process module defined mainly for the browser. It is the main features: the dependence of the delay module is executed, writing can be close dependency, the dependency need to wait until the time the reintroduced dependence, applications are sea.js.
Specifications AMD (Asynchronous Module Definition): is RequireJS in the promotion process of normalization output module definition, and it is mainly used in the browser. Its characteristics are: Front-dependent, it is necessary to rely on the need to write in the definition, execution depends advance applications are require.js
Commonjs: modular server starts, the synchronous defined modular, each module is a single scope, module output, modules.exports, load modules require () introduced into the module. nodejs comes with modular
```
var fs = require('fs');
```
requireJS achieve the AMD specification, AMD- Chinese name asynchronous modules defined meaning .
- Mainly used to solve the following two problems.
  - There are more than one file dependencies, the dependent files need to rely on it older than the file loaded into the browser
  - When you load the browser page rendering will stop, the more load the file, the longer the response time lost page
- Syntax: requireJS DEFINE defines a function, it is a global variable is used to define the module.
```
//定义模块
define(['dependency'], function(){
    var name = 'Byron';
    function printName(){
        console.log(name);
    }
    return {
        printName: printName
    };
});
//加载模块
require(['myModule'], function (my){
    my.printName();
}
```
- AMD summary specification: require () function when the load-dependent function is loaded asynchronously, so the browser does not lose the response, it specified callback function, only the front of the module loaded successfully, only to do it.
  Because the page when you load the js will stop rendering, so we can go through js loaded asynchronously, and if the need to rely on some, but also to rely on asynchronous, and then rely on the implementation of certain methods.

webpack used to doing

webpack is a modern JavaScript applications static packer module (module bundler). When webpack processing applications, it would be handed normalized to construct a dependency graph (dependency graph), wherein each module comprises application desired, all of these modules are then packaged into one or more of the bundle.

npm module installation mechanism, why would enter npm install the corresponding module can be installed automatically?

https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/22

webpack hot update principle, is how to do to update the page without refreshing the browser premise

https://zhuanlan.zhihu.com/p/30669007

https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/118

webpack packaged vue too slow how to do

https://muyiy.cn/question/tool/122.html

Modular, webpack, npm