这是关于油猴脚本的第三篇文章，最近都在研究一些关于使用JavaScript来编写一些脚本从而完成一些简单但是繁琐的工作。

如果是在电脑浏览器上，要运行一个脚本那么油猴一定是不二选择，只要你会一些JavaScript相关的知识，你就可以开始编写属于你自己的脚本。

前景回顾：

本篇文章适合对于webpack和React有一定了解的开发者，不适合新手开发者阅读，因为本文章主要讲解的是如何搭建开发环境。

最近在学习webpack打包技术的时候，突然想到，是否能够使用babel-loader将更高级的语法转换为ES5语法，然后运行在油猴上面，我试了一下，发现是可行的。

虽然油猴自带ES6模板，但是它自带的ES6模板居然和它本身的语法检测冲突了？

咱也不知道是什么情况，于是就使用webpack自己搭建一个开发环境吧。

为什么要使用webpack打包？

因为ES6新增了非常多的新特性，弥补了JavaScript诞生以来的一些缺陷，比如this指针、回调地狱、没有class关键字等等。
它可以让ES7的async，await变得可用，甚至连最新的ES11语法都可以使用，也就是说你可以使用任何JavaScript的新特性。
它支持模块化编写，如果一个庞大的脚本几千行，将所有内容都写在一个文件中显然后期的维护也会变得非常麻烦，使用webpack打包编写就可以将这些功能分布到不同的文件中，从而使脚本维护变得简单。
可以随心所欲的引入其它第三方库，因为都是运行在浏览器上面，所以也不会像小程序那样有很多限制和兼容性问题。

1. 开始

使用webpack将代码转换成ES5语法其实非常简单，只需要先安装一下包：

npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env --save-dev