你真的熟练使用webpack吗?
程序员文章站
2022-03-23 13:44:15
https://www.webpackjs.com/ 官网地址 当自己在简历中写着熟练使用webpack的时候,殊不知自己只是在vue脚手架,react脚手架的路上走着比较轻松而已。 当面试官问你这几个问题的时候,你还能从容答上来吗(高手请忽略) 什么是webpack,webpack的打包过程是怎么 ......
- 官网地址
当自己在简历中写着熟练使用webpack的时候,殊不知自己只是在vue脚手架,react脚手架的路上走着比较轻松而已。
当面试官问你这几个问题的时候,你还能从容答上来吗(高手请忽略)
- 什么是webpack,webpack的打包过程是怎么样的?
- webpack基础配置的属性有哪些
- 什么是loader?什么是plugin?他们执行先后关系是什么?
- 提高webpack的构建速度(这个比较广泛)
- 是否自己写过plugin(一旦你回答写过,马上问题就来了)
- 是否用过compiler ,介绍其中几个方法?
正文
先抛开这几个问题。谈谈本人正常学习webpack的过程,由于几年前先接触的vue,一套vue-cli跑下来 ,生成demo以后感觉自己不仅 学会了vue,还精通了webpack。 后面有个偶然的机会,想自己从头使用webpack部署。才知道里面没有那么简单。
这里有个参考的文章:
感兴趣的可以自己看。
webpack的打包过程是怎么样的
这个当自己实践着一步步去尝试开始的时候的,会有个比较清晰的理解的。 webpack是一个打包模块化javascript的工具,在webpack里一切文件皆模块, 通过loader转换文件,通过plugin注入钩子,最后输出由多个模块组合成的文件, webpack专注构建模块化项目。
webpack基础配置的属性有哪些
- 入口(entry)
- 输出(output)
- loader
- 插件(plugins)
当然在实际工程中,看到的的webpack的配置属性远远没有这么简单。
比如:我们会环境配置。dev,pro等等。
可能会使用到代理配置:类似于下面代码所示,用来进行跨域配置
proxytable: { '/api': { target: 'http://……………………', changeorigin: true, pathrewrite: { '^/api': '/api' } }, }
每个属性的配置都可以延伸开,比如入口,可以是单入口,也可以是多入口。 一旦用到具体的场景的话。 每个配置项都有可能变得复杂起来。
什么是loader?什么是plugin?他们执行先后关系是什么?
loader 用于对模块的源代码进行转换。 loader 可以使你在 import 或"加载"模块时预处理文件。 因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。
插件是 webpack 的支柱功能。 webpack 自身也是构建于,你在 webpack 配置中用到的相同的插件系统之上! 插件目的在于解决 loader 无法实现的其他事。
自然而然,这样通过描述,就能比较清晰的理解的。
plugin是在loader之后执行的,当loader处理完模块代码,plugin继续处理loader未能做完的事情
提高webpack的构建速度
这里有的一篇文章介绍的比较详细
当然优化的点大致可以区分下
- 选用合适的loader,这个是比较重要的,能够有效的提升webpack编译的速度。 - 使用happypack 实现多线程加速编译。 - 不需要打包编译的插件库换成全局"script"标签引入的方式 - 开启缓存
什么是compiler
这个只有当自己真正去写插件的时候,才会意识到的。
compiler 模块是 webpack 的支柱引擎,它通过 cli 或 node api 传递的所有选项, 创建出一个 compilation 实例。它扩展(extend)自 tapable 类,以便注册和调用插件。 大多数面向用户的插件,会先在 compiler 上注册。
以下生命周期钩子函数,
生命周期 | 说明 |
---|---|
entryoption | 在 entry 配置项处理过之后,执行插件 |
afterplugins | 设置完初始插件之后,执行插件 |
afterresolvers | resolver 安装完成之后,执行插件。 |
environment | environment 准备好之后,执行插件。 |
afterenvironment | environment 安装完成之后,执行插件。 |
beforerun | compiler.run() 执行之前,添加一个钩子。 |
run | 开始读取 records 之前,钩入(hook into) compiler。 |
watchrun | 监听模式下,一个新的编译(compilation)触发之后,执行一个插件,但是是在实际编译开始之前。 |
normalmodulefactory | normalmodulefactory 创建之后,执行插件。 |
contextmodulefactory | contextmodulefactory 创建之后,执行插件。 |
beforecompile | 编译(compilation)参数创建之后,执行插件。 |
compile | 一个新的编译(compilation)创建之后,钩入(hook into) compiler。 |
thiscompilation | 触发 compilation 事件之前执行(查看下面的 compilation)。 |
compilation | 编译(compilation)创建之后,执行插件。 |
make | …… |
aftercompile | …… |
shouldemit | ……。 |
needadditionalpass | …… |
afteremit | 生成资源到 output 目录之后。 |
done | 编译(compilation)完成。 |
failed | 编译(compilation)失败。 |
invalid | 监听模式下,编译无效时。 |
watchclose | 监听模式停止。 |
实际应用的时候,大概只需要上面几个编译前,编译后的几个钩子
最后
请原谅偶只是个标题党,文章也只是大致介绍的webpack所有需要了解的知识点的大概范围。 在实际场景应用的时候,各不相同。