[油猴脚本开发指南]webpack的意义

李恒道 · 发表于 2022-8-24 22:57:36

开篇

在今后的日子里
我们会逐渐带领大家尝试搭建出一个webpack的脚手架
来编译油猴脚本的代码
同时会逐步掺杂一些其他更有趣的东西
来实现真正的工程化

webpack初探

webpack是什么？
我们可以看一下官网的图片
https://webpack.js.org/
图片.png
其本质就是打包js代码以及做更多的处理
如果没有进入工程化的时候
我们只能在一个js中写大量的代码
这样是很不利于日常的开发以及维护的
我们当然可以拆分成多个js文件
但是这样又会存在引入问题，冲突问题等等
那我们应该把js代码拆分成模块？
社区出现了多种多样的模块化方案
如AMD、CMD、CommonJS、ES6
但是目前AMD和CMD都已经基本进入历史的洪流了
所以我们只需要了解CommonJS以及ES6的模块化方案即可
但是现在又出现了问题
第一是浏览器并没办法兼容一些模块化方案
第二是即使兼容模块化方案也可能因为模块化而加载大量的碎片文件、造成严重耗时
同时如果对文件进行压缩等处理也需要借助其他工具，太麻烦了！
那我们应该怎么解决呢？

解决方案

应该搞出来一个模块的打包工具
将模块化的文件在部署到正式环境的时候全部压缩成一个文件(也可能是多个)
这就是webpack的最本质的工作
webpack is a static module bundler for modern JavaScript applications.
webpack是一个现代JavaScript引用的静态模块打包工具
那除此之外、既然我们已经负责了代码的合并工作
我们必然需要对代码进行读取和解析
那为什么我们不做更多工作？
如对编译后的代码进行代码压缩
在编译的过程中可以根据编译的浏览器目标做对应的语法降级(使用插件)
根据编译的不同配置来区分环境，编译出不同的代码内容
通过附加插件来让webpack编译更多的代码/解析更多的东西
我们甚至可以通过编写webpack代码插件来让其处理我们自己的一套解析规则！
哇哦，这太棒了
但是Webpack的工作远不止于次，在今后的使用中你会赞叹出一句话

如同天上降魔主
真是人间太岁神
这个Webpack
牛逼！

在接下来的日子里让我们一起研究webpack吧！

结语

撒花

blue5 · 发表于 2022-8-24 23:10:02

从知乎到b站特地赶来注册支持版主！分享的内容很干货，谢谢！

李恒道 · 发表于 2022-8-24 23:42:19

blue5 发表于 2022-8-24 23:10
从知乎到b站特地赶来注册支持版主！分享的内容很干货，谢谢！

谢谢哥哥支持
没想到知乎也有人看
阅读量贼低后来就放弃了
就想起来随手更一下
还有人能看挺感动的

MiracleL · 发表于 2022-8-25 08:59:43

正在学习写脚本中

王一之 · 发表于 2022-8-25 09:50:16

如同天上降魔主
真是人间太岁神
这个贾克斯

BlenderB · 发表于 2022-8-26 11:00:21

如同天上降魔主
真是人间太岁神
这个Webpack
牛逼！------------一定抽出时间来学习