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

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

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

# 初始化
我们新建一个空白文件夹
npm init -y
默认初始化一个项目
然后输入
npm install webpack webpack-cli --save-dev
同时安装webpack webpack-cli两个依赖
webpack-cli是为了让我们使用命令行来调用相关的webpack代码
一般是必须安装的(否则无法使用命令行编译)
当然你也可以写自己的程序来调用webpack进行编译代码
# 创建文件
我们创建一个index.js文件
在内部随便输入一些代码，(目前你的文件夹是没有dist的，因为还没有编译)
然后我们需要调用webpack命令行
输入
```
.\node_modules\.bin\webpack ./index.js
```
其中.\node_modules\.bin\webpack 是找到对应的命令文件 然后传入对应参数
可以看到
同时有了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属性
直接以键值方式输入对应的命令即可
其中键是我们自定义的
然后我们可以输入npm run build(build是我们自定义的)来调用编译
### VSCODE中的调用npm脚本方法
左下角自带npm脚本调用，特别方便
# 结语
那么我们就完成了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就好了

这不是我能帮忙的
害

查看完整版本: [油猴脚本开发指南]webpack初体验