上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

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

[复制链接]
  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    712

    主题

    5966

    回帖

    6763

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6763

    荣誉开发者喜迎中秋油中2周年生态建设者

    发表于 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吧!

    结语

    撒花

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。

    该用户从未签到

    0

    主题

    1

    回帖

    1

    积分

    助理工程师

    积分
    1
    发表于 2022-8-24 23:10:02 | 显示全部楼层
    从知乎到b站特地赶来注册支持版主!分享的内容很干货,谢谢!
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    712

    主题

    5966

    回帖

    6763

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6763

    荣誉开发者喜迎中秋油中2周年生态建设者

    发表于 2022-8-24 23:42:19 | 显示全部楼层
    blue5 发表于 2022-8-24 23:10
    从知乎到b站特地赶来注册支持版主!分享的内容很干货,谢谢!

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

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2022-9-20 10:07
  • 签到天数: 35 天

    [LV.5]常住居民I

    0

    主题

    39

    回帖

    40

    积分

    初级工程师

    积分
    40
    发表于 2022-8-25 08:59:43 | 显示全部楼层
    正在学习写脚本中
    回复

    使用道具 举报

  • TA的每日心情
    开心
    前天 13:37
  • 签到天数: 213 天

    [LV.7]常住居民III

    305

    主题

    4196

    回帖

    4061

    积分

    管理员

    积分
    4061

    管理员荣誉开发者油中2周年生态建设者喜迎中秋油中3周年挑战者 lv2

    发表于 2022-8-25 09:50:16 | 显示全部楼层
    如同天上降魔主
    真是人间太岁神
    这个贾克斯
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。
    回复

    使用道具 举报

  • TA的每日心情
    擦汗
    2024-1-28 11:21
  • 签到天数: 59 天

    [LV.5]常住居民I

    19

    主题

    102

    回帖

    124

    积分

    中级工程师

    积分
    124
    发表于 2022-8-26 11:00:21 | 显示全部楼层
    如同天上降魔主
    真是人间太岁神
    这个Webpack
    牛逼!------------一定抽出时间来学习
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表