commonJS规范下的webpack

为什么要使用webpack

假设:a.js 依赖 b.jsb.js 依赖 c.jsc.js 依赖 d.js

所以在前端去引用这些依赖的时候,往往是这样的:

  <script src='a.js'></script>
  <script src='b.js'></script>
  <script src='c.js'></script>
  <script src='d.js'></script>

不论加载哪个页面，这些js都会被加载，那就造成了不必要的浪费
webpack 这就发挥作用了。

webpack主要规范：commonJS、AMD、CMD
最常用的还是commonJS(主要从项目业务出发)

commonJS

commonJs是应用在NodeJs，是一种同步的模块机制
每个文件就一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

1.module对象

1. module.exports属性

   module.exports属性表示当前模块对外输出的接口

     module.id 模块的识别符，通常是带有绝对路径的模块文件名。
     module.filename 模块的文件名，带有绝对路径。
     module.loaded 返回一个布尔值，表示模块是否已经完成加载。
     module.parent 返回一个对象，表示调用该模块的模块。
     module.children 返回一个数组，表示该模块要用到的其他模块。
     module.exports 表示模块对外输出的值。

2. exports变量

node为每一个模块提供了一个exports变量(可以说是一个对象)，指向 module.exports。这相当于每个模块中都有一句这样的命令 var exports = module.exports;

( 阮老师说这两个不好区分，那就放弃 exports，只用 module.exports 就好）

commonsJS的加载机制

（1）require 加载机制
对外输出的值，是这个值得拷贝（复制），如果这个值内部值改变，那么对外输出的值并不改变；
例如：

var value = 3;
function add() {
    value++;
    console.log('内部 value +1 : ' + value)
}

module.exports = {
    value: value,
    add: add,
};

var test= require('./exapmle6');

console.log('外部 value 执行1 : '+test.value);  //外部 value 执行1 : 3
console.log(test.add());   //内部 value +1 : 4 undefined
console.log('外部 value 执行2 : '+test.value); //外部 value 执行2 : 3

require函数：

• require(): 加载外部模块
• require.resolve()：将模块名解析到一个绝对路径
• require.main：指向主模块
• require.cache：指向所有缓存的模块
• require.extensions：根据文件的后缀名，调用不同的执行函数

欢迎关注我的博客： https://blog.csdn.net/weixin_42323607

github地址： https://github.com/qdheyongjie

多多支持！本人会持续更新哒 ❤️