[油猴脚本开发指南]webpack初体验

李恒道 · 发表于 2022-8-26 00:22:03

初始化

我们新建一个空白文件夹
npm init -y
默认初始化一个项目
然后输入
npm install webpack webpack-cli --save-dev
同时安装webpack webpack-cli两个依赖
webpack-cli是为了让我们使用命令行来调用相关的webpack代码
一般是必须安装的(否则无法使用命令行编译)
当然你也可以写自己的程序来调用webpack进行编译代码

创建文件

我们创建一个index.js文件
在内部随便输入一些代码，(目前你的文件夹是没有dist的，因为还没有编译)
图片.png
然后我们需要调用webpack命令行
输入

.\node_modules\.bin\webpack ./index.js

其中.\node_modules.bin\webpack 是找到对应的命令文件然后传入对应参数
可以看到
图片.png
同时有了dist文件夹
里面的内容还没有任何改变
不要担心，这是正常情况，我们会在后续逐步了解

那么这节课的内容就大功告成啦！
但是还有一个问题
.\node_modules.bin\webpack太他妈长了
有没有什么好办法
我们可以输入

npx webpack ./index.js

npx就会自动搜寻项目下的对应webpack命令
当项目内不存在webpack
npx命令调用模块也会自动下载到一个临时目录并进行调用
但是在油猴开发中我们并不常见该方法
关于npx更具体的内容你可以去参考
https://www.ruanyifeng.com/blog/2019/02/npx.html

第二种调用方法--npm脚本

我们在package.json中的scripts属性
直接以键值方式输入对应的命令即可
其中键是我们自定义的
图片.png
然后我们可以输入npm run build(build是我们自定义的)来调用编译

VSCODE中的调用npm脚本方法

左下角自带npm脚本调用，特别方便
图片.png

结语

那么我们就完成了webpack的第一次编译以及脚本调用的基本方法~
撒花！

王一之 · 发表于 2022-8-26 11:44:51

我感觉vite更好用，就是生态没webpack那么好

可能主要是eslint、prettierrc之类的都配好了，开箱即用比较舒服

但是对于油猴脚本之类的来说，不清楚dev模式怎么生成文件，只能使用build --watch的方式，文件变动就重新构建一次，用不了热重载，效率很低

李恒道 · 发表于 2022-8-26 14:45:08

王一之发表于 2022-8-26 11:44
我感觉vite更好用，就是生态没webpack那么好

可能主要是eslint、prettierrc之类的都配好了，开箱即用比较 ...

就是相中webpack生态好才用的这个
hhh
油猴脚本的话我觉得热更新没必要吧...
框架之类的有固定格式善于hmr都经常干出来bug
油猴一方面属于原生JS，HMR代码写着麻烦
一方面对网站有破坏性，hmr更容易出问题....

王一之 · 发表于 2022-8-26 14:49:06

李恒道发表于 2022-8-26 14:45
就是相中webpack生态好才用的这个
hhh
油猴脚本的话我觉得热更新没必要吧...

应该说是重新编译文件，不是同步更新

unity韩 · 发表于 2022-8-26 15:17:28

哥哥帮我破解一个nft就好了

李恒道 · 发表于 2022-8-26 15:20:17

unity韩发表于 2022-8-26 15:17
哥哥帮我破解一个nft就好了

这不是我能帮忙的
害