webpack基本概念

205 阅读1分钟

0. 为什么选择webpack

官网地址 深入浅出webpack

对官网为什么选择webpack的总结

其实说白了,webpack就是一个打包的构建工具,webpack可以让我们在编写web应用时使用新兴的技术去提升开发 的效率而不用去考虑浏览器支不支持,它会帮我们转化成主流浏览器支持的代码。当然webpack能干的事情远不止这么多,比如代码检测等,有待我们去发掘。

理解

  • webpack(web应用打包):平时我们在生活中也会经常遇到打包某些东西,比如我们会把衣服都整理叠好,然后放到一个箱子里面。webpack所干的事情也类似于这样的一个过程,将多个js文件、css文件、资源(图片等)等打包成少量的文件,一般是一个。

问题 qa.delixi.com: 随便打开一个页面,查看js加载过程 对比jd.com的首页

network打开 Waterfall Protocol size(查看是否来自于缓存)
[Waterfall解释](https://www.jianshu.com/p/c7e0dad634db)
1. 重复加载
2. 没有使用到的文件内容太多
3. ttfb: Time To First Byte 发出页面请求到接收到应答数据第一个字节所花费的毫秒数
         TCP建立、域名解析等
         网页重定向越多,TTFB越高,所以要减少重定向,减少需要下载的文件个数
4. 代码压缩
5. 文件个数太多

1. 入口(entry)

2. 输出(output)

3. loader

4. 插件(plugin)

5. 模式(mode)

6. 浏览器兼容性(browser compatibility)

7. 依赖图(dependency graph)