模块化

webpack

定义

    将系统功能分离成独立的功能部分的方法，分离出去的每一个部分，都可以看成一个模块。即一个js文件里有一定的功能，这个js文件就是一个模块

 

优点

    1、开发成本低，便于协调合作，开发效率高，便于复用和维护以及测试（代码复用，便于维护）

 

入口文件

    做模块化时，最终需要将各个文件组合在一起，所以需要入口文件

    模块在合并时有很多方法和工具来做到这一点，这些方法和工具都会提供出一种模块化规范，必须按照统一的规范来进行模块组合

 

模块化规范

    只说明两个问题

        1、如何导入模块

        2、如何导出模块

    1、nodejs中使用的是commonjs规范

        导入模块：require

        导出模块：module.exports

        特点：同步，运行在服务端，模块都在本地，模块的导入速度=硬盘的读取速度

    2、ES6 module

        导入模块：import from

        导出模块：export

        特点：同步

 

操作

1、引入

        require（'文件路径'）    因为文件并没有暴露内容给其他文件用，所以不需要

        

注意

1、模块中的变量/对象等都是私有的，单纯引入模块只是让这个模块的代码运行，但不能使用模块中的使用变量等。如需要使用模块中的一些东西，必须让其暴露出来，暴露时module.exports的值是什么，require的返回值就是什么

 

2、多入口，单出口：入口用数组，且谁在前面，打包时谁的家族就在前面

 

3、多入口，多出口：入口用对象，键名用家族名。出口[name].js    name代表入口中的键名

 

4、单入口，单出口

 

5、js打包后，页面需要手动刷新。