webpack

• 理解前端模块化
• 理解webpack打包的核心思路
• 理解webpack中的“关键人物”

模块化

• 优点

  • 作用域封装
  • 重用性
  • 解除耦合

• 进化史

  • //AMD(异步模块定义)
    define('getSum',['math'],function(math){
      return function(a,b){
        console.log('sum'+ math.sum(a+b))
      }
    })
    

  • //common.js
    const math = require('./math')
    exports.getSum=function(a,b){
      return a+b;
    }
    

  • //ES6 MODULE
    import math from './math'
    export function sum(a,b){
      return a+b;
    }
    

webpack的打包过程

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

npm与包管理器

  {
    "name": "webpack",//包名称
    "version": "1.0.0",//版本号
    "description": "test",
    "main": "index.js",//执行入口
    "scripts": {
      // preinstall postinstall prepublish postpublish
      "test": "echo \"Error: no test specified\" && exit 1"
    },//自定义脚本
    "author": "",
    "license": "ISC",
    "dependencies": {//生产环境依赖 npm install --only=prod
      "loadash": "^1.0.0"
    },
    "devDependencies": {//开发环境依赖 npm install --only=dev
      "jquery": "^3.5.1"
    }
  }

• ^version: 中版本和小版本 ^1.0.1-->1.x.x
• ~version: 小版本 ~1.0.1-->1.0.x
• version: 特定版本