Webpack是什么

Webpack是JavaScript应用程序的静态模块打包器

  • 逻辑多,文件多,项目的复杂度提高了.就是因为Webpack是打包神器
  • Wepack能支持翻译能力
  • 可插拔

作用域

全局变量是挂在的在全局对象上的

  • 在windows的全局对象是windows
  • 在Mac的全局对象是brower
1
2
3
var a = 1

window.a // 这里就能拿到

我们在页面上引入的script文件是全局的,因此文件里面的变量也是全局的,这样就有可能造成作用域被污染,变量发生冲突

1
2
3
<script src="/.moduleA.js"></script>
<script src="/.moduleB.js"></script>
<script src="/.moduleC.js"></script>

这时可以考虑使用闭包

1
2
3
4
5
6
7
8
9
10
11
12
// moduleA.js
// 此时name和sex已经被存缓好了,可以被return的function访问
// 这样name和age就被保护(隐藏)起来了,因为这样外部就访问不到他们了
var moduleA= (function(){
              var name = "susan"
              var sex = "nv"
              return {
                  tell: function(){
                      console.log("my name is ",name)
                  }
              }
})()

第二种写法:

1
2
3
4
5
6
7
8
(function(){
    var name = "susan"
    var sex ="nv"
    function tell(){
        console.log("my name is ",name)
    }
    window.susanModule = { tell  }
})(window)

模块导出机制的演变历史

AMD

asynchronous Module Definition:异步模块定义

1
2
3
4
5
6
7
8
// 第一参数:模块的名字
// 第二参数:模块的依赖
// 第三参数:模块的导出
define("getSum", ["math"], function(math){
    return function(a, b){
        console.log("sum:", math.sum(a,b))
    }
})

CommonJS

1
2
3
4
5
6
7
// 通过require函数来引入
const math = require("./math")

// 通过exports将其导出
exports.getSum = function(a, b){
    return a + b
}

ES6 Module

1
2
3
4
5
6
7
// import 导入
import math from "./math"

// export 导出
export function sum(a, b) {
    return a + b
}

模块

  • 作用域封装
  • 重用性
  • 接触耦合

Webpack的打包逻辑

  • 从入口文件开始,分析整个应用的依赖树
  • 将每个依赖模块包装起来,放到一个数组中 等待调用
  • 实现模块加载方法,并把它放到模块执行的环境中,确保模块间可以互相调用
  • 把执行入口文件的逻辑放在一个函数表达式中,并立即执行这个函数

npm与包管理器

1
2
// 初始化包
npm init
1
2
3
4
5
6
7
8
9
10
11
12
// package.json
{
    "name":"demo", // 包名称
    "version":"1.1.0", 
    "description":"",
    "main":"index.js" // 执行入口
    "scripts": {
        "test":"each \"Error :no test spified\" && exit 1"
    }, // 自定义脚本
    "author":"",
    "license":"ISC"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 设置淘宝镜像仓库
npm config set registry https://npm.taobao.org

# 安装
# save的功能:自动将下载的包写入package.json的dependencies字段
npm install lodash -s
# or
npm install lodash --save

# 写入package.json的devDependencies字段
npm install lodash --save-dev

# 默认-s参数,所以会同时写入dependencies字段和devDependencies字段
# 如果想写入一个的话,使用only
npm insall --only=dev

## 删除所有的包,然后重装
rm -rf node_modules && npm install

版本语义化

  • 1.2.3:大版本为1,中版本为2,小版本为3

  • ^version:中版本中最新的版本

    • ^1.0.1:对于所有形为1.x.x版本中,1.0.1是最新的版本

  • ~version:小版本中最新的版本

    • ~1.0.1:对于所有形为1.0.x版本中,1.0.1是最新的版本

npm install的过程

  1. 寻找包版本信息文件(package.json),依照他进行安装
  2. 查package.json中的依赖,并检查项目中其他的版本信息文件
  3. 如果发现了新包,就更新版本信息文件