nodejs + webpack4 + babel6 结合写Chrome浏览器插件记录(2)
上来先来看下当前实现的效果吧。
前言
首先感谢第一篇留言鼓励的同学，最近各种繁杂的事，时间占用较多，但是也总抽空继续改造这个项目，期间遇到了各种Vue渲染的问题，常规的字符串渲染会在Chrome插件中引起“unsafe-eval”问题等，同时导致component失效无法渲染等。
通过设置安全策略，解决了unsafe-eval的问题。
下一步
接下来的东西还有很多，准备按照Infinity这个插件的UI，虽然还是暂时用的电影网站的链接去做的，去做下来把所有的功能完善一下，Infinity没用过的可以去百度一下，因为需要FQ，这里就不贴地址了。
当前已经集成了Vue ElementUI, 本来elementUI可以支持组件引入，考虑到不需要远程加载，而且我又很懒的情况，就整体引入了，现在已经可以像写正常的web 页面去写插件的页面组件了，仔细看右侧的控制台就能发现搜索框用的就是element-UI的input组件。
这里用了一个免费的接口去获取1920*1080的高清背景图片，每次刷新都可以更新背景图，图片比较大 加载有点慢，其实也可以自己写一个接口，做一下服务端缓存或者用cdn，这里就不作为重点考虑。
当前使用了less作为css预编译语言，其他依赖都是常规的，但也都是比较新版本的组件。
"devDependencies": { "@babel/cli": "^7.0.0", "@babel/core": "^7.0.1", "@babel/preset-env": "^7.0.0", "babel-loader": "^8.0.2", "clean-webpack-plugin": "^2.0.2", "copy-webpack-plugin": "^5.0.3", "css-loader": "^3.0.0", "element-ui": "^2.10.0", "file-loader": "^3.0.1", "html-loader": "^0.5.5", "html-webpack-plugin": "^4.0.0-beta.5", "jquery": "^3.4.1", "jsonfile": "^5.0.0", "less": "^3.9.0", "less-loader": "^5.0.0", "mini-css-extract-plugin": "^0.6.0", "url-loader": "^1.1.2", "vue": "^2.5.17", "vue-loader": "^15.3.0", "vue-style-loader": "^4.1.2", "vue-template-compiler": "^2.5.17", "webpack": "^4.33.0", "webpack-cli": "^3.3.2", "webpack-dev-server": "^3.7.2" }
细心的同学应该能发现里面用了一个webpack-dev-server,但其实这个照道理来说是用不上的，因为是需要生成文件在浏览器里用的，这里加入这个的目的主要是页面方面可以实时在页面浏览，方便调试。
