模块化,webpack，npm

如何理解前端模块化

前端模块化就是复杂的文件编程一个一个独立的模块，比如js文件等等，分成独立的模块有利于重用（复用性）和维护（版本迭代），这样会引来模块之间相互依赖的问题，所以有了commonJS规范，AMD，CMD规范等等，以及用于js打包（编译等处理）的工具webpack

说一下Commonjs、AMD和CMD

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

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

一个模块是能实现特定功能的文件，有了模块就可以方便的使用别人的代码，想要什么功能就能加载什么模块。

• CMD (Common Module Definition), 是sea.js在推广过程中对模块定义的规范化产出，主要用于浏览器端。它主要特点是：对于依赖的模块是延迟执行，依赖可以就近书写，等到需要用这个依赖的时候再引入这个依赖，应用有sea.js.

• AMD规范（Asynchronous Module Definition）：是 RequireJS 在推广过程中对模块定义的规范化产出，也是主要用于浏览器端。其特点是：依赖前置，需要在定义时就写好需要的依赖，提前执行依赖，应用有require.js

• Commonjs：开始于服务器端的模块化，同步定义的模块化，每个模块都是一个单独的作用域，模块输出，modules.exports，模块加载require()引入模块。nodejs 中自带的模块化

  var fs = require('fs');
  

• requireJS实现了AMD规范，AMD—中文名异步模块定义的意思。

  • 主要用于解决下述两个问题。

    • 多个文件有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器
    • 加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应的时间越长

  • 语法：requireJS定义了一个函数define，它是全局变量，用来定义模块。

    //定义模块
    define(['dependency'], function(){
        var name = 'Byron';
        function printName(){
            console.log(name);
    	}
        return {
            printName: printName
        };
    });
    //加载模块
    require(['myModule'], function (my){
        my.printName();
    }
    

  • 总结AMD规范：require（）函数在加载依赖函数的时候是异步加载的，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块加载成功，才会去执行。
    因为网页在加载js的时候会停止渲染，因此我们可以通过异步的方式去加载js,而如果需要依赖某些，也是异步去依赖，依赖后再执行某些方法。

webpack用来干什么的

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块？

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

webpack 热更新原理，是如何做到在不刷新浏览器的前提下更新页面的

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

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

webpack 打包 vue 速度太慢怎么办

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