webpack源码分析

安装

安装webpack  
npm i webpack webpack-cli --save-dev
npm i webpack-dev-server  --save-dev

难点分析

1. 源码入口文件（从index.js开始看）

2. @typedef / /** @type {string} */ (此种代码代表什么）

   详细请看： www.jsdoc.com.cn/

3. Object.getOwnPropertyDescriptors / Object.defineProperty / get webpack() {}

   Object.getOwnPropertyDescriptors 
   地址： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors
   
   Object.defineProperty
   **`Object.defineProperty()`**  方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
   地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
   
   get webpack (){}
   对象里使用get，是为了设置当前属性get时返回结果
   
   

4. Array.isArray(options) ? Array.from(options) : [options];

   Array.isArray  // 判断是否是数组
   Array.from     // ## Array.from方法可以把一个类数组或者课遍历对象转换为一个正真的数组 所谓类数组对象，最基本     的要求就是具有length属性的对象
   
   
   

5. 封装生命周期钩

   zhoubichuan.gitee.io/web-webpack…

 ```



 ```

源码分析

文件执行顺序

1. lib/index.js
2. lib/webpack.js
3. lib/Compiler.js

源码结构分析

源码代码分析

精简过后代码
const webpack =  ((options, callback) => {
   	const create = () => {
   		let compiler;
   		let watch = false;
   		
   		let watchOptions;
               // >opions是一个数组 
   		if (Array.isArray(options)) {
   		
   			compiler = createMultiCompiler(
   				options,
   			        (options)
   			);
   			watch = options.some(options => options.watch);
   			watchOptions = options.map(options => options.watchOptions || {});
   		} else {
                          // options不是一个数组
   			const webpackOptions = (options);
   		
   			compiler = createCompiler(webpackOptions);
   			watch = webpackOptions.watch;
   			watchOptions = webpackOptions.watchOptions || {};
   		}
   		return { compiler, watch, watchOptions };
   	}
   }
);