webpack原理解析（几张图清楚了解其原理）

webpack是利用什么来打包的？

• webpack依赖于node的环境与文件操作系统
• webpack的打包过程，其实就是利用node去读取文件，然后进行一些字符串处理后，再利用node去写入文件

webpack打包流程

Loader是如何生效的？

• Loader其实是一个方法：接受一个字符串，方法内部处理完后再返回字符串，结构如下图代码所示：

// Loader 组织结构
// 下面会将文件内容 c1 编译打包为 console.log(1)
module.exports=function(resource){
  // 如果想传出更多的参数信息，如错误，sourcemap等，则可使用下面这种方式
  // this.callback(err,resource.replace('c',"console.log"),sourcemap)
  
  // return 只能传出一个处理后的结果
  return resource.replace('c',"console.log");  
}

打包结果分析

// 打包代码组成
(function(modules){ // modules 就是传进来的对象，即所有要被打包的代码
  function __webpack_require__(moduleId){};

  return __webpack.require(__webpack_require__.s="./app.js")
})({
  "./app.js":(function(){}),
  "module1.js":(function(){}),
  "module2.js":(function(){}),
})

// 上面代码其实就是一个匿名自执行函数，参数就是相关业务代码，就是相关被打包的代码一起作为一个对象写进去，
// 这个对象的键名是相关依赖的名字，值是一个函数，就是要执行的代码。
// 然后里面有一个 __webpack_require__ 方法，会依次执行我们的代码

如何排队模块

• 上图显示，会首先排队入口文件app.js，如果app.js里面引入了module1.js文件和module2.js文件，则会依次排队module1.js，module2.js；如果module1.js里引入了module2.js文件，此时module2.js已经在队伍当中，所以不会再去重复排队。

dev-server原理

• dev-server是利用express和一个中间件webpack-dev-middleware来开启服务，然后开启的server会执行打包出来的代码。

热更新原理

开启服务==》建立一个websocket链接==》发生代码改变，服务通过websocket通知到客户端==》客户端替换新代码。