webpack知识点笔记

3 篇文章 0 订阅

第一:webpack的工作步骤如下:
1.从入口文件开始递归地建立一个依赖关系图。
2.把所有文件都转化成模块函数。
3.根据依赖关系,按照配置文件把模块函数分组打包成若干个bundle。
4.通过script标签把打包的bundle注入到html中,通过manifest文件来管理bundle文件的运行和加载。(疑问:bundle文件的运行和加载为什么需要管理?)

打包的规则为:一个入口文件对应一个bundle。该bundle包括入口文件模块和其依赖的模块。按需加载的模块或需单独加载的模块则分开打包成其他的bundle。
除了这些bundle外,还有一个特别重要的bundle,就是manifest.bundle.js文件,即webpackBootstrap。这个manifest文件是最先加载的,负责解析webpack
打包的其他bundle文件,使其按要求进行加载和执行。

1.webpack manifest文件用来引导所有模块的交互
2.当webpack编译器处理和映射应用代码时,它把模块的详细的信息都记录到了manifest文件中。
当模块被打包并运输到浏览器上时,runtime就会根据manifest文件来处理和加载模块。利用manifest就知道从哪里去获取模块代码\


3.Tree Shaking
去除无用代码,比如某个js文件里的函数并没有被使用,这段函数代码在打包时将会被去掉。


4.Hot Module Replacement
热模块替换功能可以在不刷新所有文件的情况下实现单独跟新某个模块。

5.Entry
入口文件是webpack建立依赖图的起点。

6.Output
Output配置告诉webpack怎么处理打包的代码。

第二知识点:webpack build后生成的app、vendor、manifest区别;以及按需加载?
vendor.js: 默认将node_modules里require的依赖都打包在这里

manifest.js: 在vendor.js的基础上,主要将一些异步加载等打包在这里

app.js: 默认将所有你自己写的js打包在这里

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值