webpack工具打包前台代码，封装成jq插件，供第三方调用

最近，管理平台接到新需求，需要向第三方提供可单点的操作页面，嵌入到他们的系统页面。

一脸萌逼，听起来简单的，但实际操作，需要对用户鉴权，需要对嵌入的插件做模版处理等等一系列问题。

首先考虑第一个问题：如何实现单点？

通过查找各方资料，实现很简单，需要第三方在调用插件的时候（也就是我们的入口函数），需要对方提供操作用户及token值或ticket认证凭据，然后此信息通过加密处理，传到我们后台，进行对信息的解析(不解析也可以，反正还要吐到对方的接口验证，具体要看需求了)，然后再将信息吐到对方接口进行验证，根据response来做出正确的鉴权行为，通过的话，注意要保存session,避免掉线的尴尬局面。

其次： 如何做到嵌入呢？

搞过web前端的同学都知道，我们要实现某块功能，离开插件，真的不行！细心的同学估计研究过怎么写插件，如果你是这样的话，此段可略过。

嵌入的插件，我选择用webpack打包，原因很简单，我们平台就是用的它。不懂原理的可以先自行补脑。

废话不说了，直接开讲：

插件要考虑到几点问题：

1，样式冲突问题； 

2，js插件引用不生效；

3，图片路径问题；

4，入口函数。

第一点，可以考虑用特殊前缀解决，比如：我属于张三麻辣烫有限公司，那么前缀统一一下，都以zs开头  zs_ui_div；

第二点，要看项目结构了，好多现在的系统都是用框架级别的，可以把需要的js全部放到指定目录，一起打包，避免漏掉（具体参考下面的demo）;

第三点，webpack打包的话，会限制图片大小，需要视情况改动一下（加载不上去的话会报错滴，注意看控制台的信息）；

第四点，入口函数的直接考虑用公用的js，见下面的main1.js

以下截图是整个包的文件，assets里面是第三方的插件之类的，其他的自个儿写就行了



返回上一级，我们在此目录下面运行 webpack(前提是你电脑上装过npm,没装过的话，运行npm install，网速好的话几分钟就可以下载好)，bundle.js就是提供给第三方的插件

index.html是调用实例。



下一节，我会公开源码，感谢你的关注！谢谢。

如果觉得就给点赏钱吧，多了不谢，少了不嫌