你真的熟练使用webpack吗?
2024-10-02 05:47:03
当自己在简历中写着熟练使用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的构建速度
这里有的一篇文章介绍的比较详细
https://www.jianshu.com/p/bb1e76edc71e
当然优化的点大致可以区分下
- 选用合适的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所有需要了解的知识点的大概范围。
在实际场景应用的时候,各不相同。
最新文章
- JS/CSS收藏
- 1、Python环境安装部署
- win下搭建uvm环境
- C Memory Layout C语言中的内存布局
- YTU 2924: 文件操作--二进制文件读入
- php数组编码转换函数的示例
- 几款开源的图形界面库(GUI Libraries)
- 九度OJ 朋友圈 -- 并查集
- 内网DMZ外网之间的访问规则
- 使用val()方法设置表单中的默认选中项
- The Boost C++ Libraries
- Visual Studio 2012中编写C程序
- li里的a标签浮动了,为什么li本身也浮动了?
- iOS学习——iOS原生实现二维码扫描
- Python:黑板课爬虫闯关第三关
- [Swift]LeetCode732. 我的日程安排表 III | My Calendar III
- browser_action' is only allowed for extensions but this is a legacy packaged app
- jQuery判断鼠标滚动方向
- 词频统计V2.5
- Codeforces Round #441 D. Sorting the Coins(模拟)
热门文章
- MySQL批量更新一个字段的值为随机数
- .net core 杂记:WebAPI的XML请求和响应
- 手把手教你实现";短信轰炸";
- iOS 唤起APP之Universal Link(通用链接)
- 实现markdown功能
- 微信小程序支付以及微信退款开发
- C语言指针专题——指针难学的4点原因
- 【题解】P2916 [USACO08NOV]安慰奶牛Cheering up the Cow-C++
- py+selenium运行时报错Can not connect to the Service IEDriverServer.exe
- Python趣用—配平化学方程式