关于webpack

欢迎访问我的博客,祝各位码农同胞们早日迎娶白富美,走上人生巅峰~~~

前言

今天面试遇到了一个问题,先问的是怎么理解webpack的,我答了webpack的主要作用与主要原理,然后问我怎样优化webpack的打包速度,一时半会没想起来,就说我暂时没考虑到这个,后来回来想想,其实我的项目里用到了一个热更新,其作用就是不回重新生成bundle.js,而是以补丁的形式更新,这不就是意味着需要打包的的内容会被减,不就是提高了打包速度嘛,

怎么优化webpack打包速度

这里讲我在项目利用到的,在package.json中的dev配置的时候,配置加上--hot即可

有些其他方法

移步https://www.cnblogs.com/imwtr/p/7801973.html

对webpack的理解

由于webpack很强大,所以对webpack每个人有不同的理解,可能说出来又要长篇大论,但我对webpack目前的掌握只能说是了解吧,所以先大致总结下,以后还需要慢慢学习

对webpack了解哪些

  1. webpack是一个打包模块化javascript的工具,在webpack里一切文件皆模块,通过loader转换文件,通过plugin注入钩子,最后输出由多个模块组合成的文件,webpack专注构建模块化
  2. WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用
  3. 官网的图片形象的展示了webpack的定义

webpack的打包原理

  1. webpack中每个模块有一个唯一的id,是从0开始递增的。整个打包后的bundle.js是一个匿名函数自执行。参数则为一个数组。数组的每一项都为个function。function的内容则为每个模块的内容,并按照require的顺序排列
  2. 我们看到_webpack_require是模块加载函数,接收模块id(对,webpack中每个模块都会有一个独一无二的id,其实也就是在IIFE传参数组中的索引值(0,1,2…..)
  3. a依赖b,所以在a中调用webpack加载模块的函数

webpack的构建流程

  1. 解析webpack配置参数,合并从shell传入和webpack.config.js文件里配置的参数,生产最后的配置结果。
  2. 注册所有配置的插件,好让插件监听webpack构建生命周期的事件节点,以做出对应的反应。
  3. 从配置的entry入口文件开始解析文件构建AST语法树,找出每个文件所依赖的文件,递归。
  4. 在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换。
  5. 递归完后得到每个文件的最终结果,根据entry配置生成代码块chunk。
  6. 输出所有chunk到文件系统。

参考文章

本文标题:关于webpack

文章作者:王工头

发布时间:2019年02月20日 - 15:56:01

最后更新:2019年02月20日 - 15:59:03

原始链接:https://qqqww.com/关于webpack/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------本文结束感谢大佬们的阅读-------------