webpack构建

1.概念

  • loader文件加载器,可以获取匹配文件的内容,对文件内容进行修改
  • plugin插件,用于扩展webpack功能,在webpack构建生命周期的节点加入扩展的hook为webpack加入功能

2.webpack构建流程

  • 解析webpack配置参数,合并控制台传入和webpack.config.js文件中的配置参数,产生最后的配置结果
  • 注册配置的插件,让插件监听webpack构建生命周期中的事件节点
  • 从entry入口文件开始解析文件构建语法树,找到每个文件的依赖文件,传递下去
  • 在解析文件递归的过程中,根据文件类型和loader配置来找出合适的loader对文件进行转换
  • 递归完成后得到每个文件的最终结果,根据entry配置生成代码块chunk
  • 输出所有chunk到文件系统
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 14,334评论 7 110
  • 20170315更新 由于webpack已更新至2.0版本,许多配置项都已改变,所以可能本文有些项已经过时了 推荐...
    waka阅读 49,126评论 57 88
  • 在现在正在开发的项目中,为了实现前后端分离开发,决定使用刚刚发布不久的vue.js 2.0和koa 2.0来进行开...
    liuwill阅读 10,414评论 0 15
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 12,543评论 7 35
  • 因为哥叔爷知道了简书,从此找到了一个不用撕掉的笔记本。 从小就有爱写日记的习惯,写完一本烧掉一本,后来索性就不写了...
    mila翁翁阅读 1,267评论 0 0