webpack打包js文件,无法被引用

2,010 阅读1分钟

webpack的错误姿势

相信大家都是自己开发过插件的,把源码一码,然后就是npm publish上传,over!但是这样的姿势属实有点丑!!

image.png

然后我就想着使用webpack把开发的插件打包一下,然后出来的bundle就是下面的样子,看上去是不是很高大上的样子,就很猛!

image.png

但是不要高兴的太早,因为你去引用的话就是这个样子。。。。这是什么鬼啊!!!!,我完全看不懂是个什么意思,然后就找到了@bable下面的某个文件中的inherit方法,superClass只能是function或者为null??????

image.png

image.png

然后我就想我是不是写的插件有问题,因为正常情况下在html文件中,引用js文件的话是没有暴露语句的没有commonJS也没有module语法,只需要在js文件中定义了这些变量和函数,再引入就可以使用了

image.png

然后我把暴露语句去掉再打包。。。发现打包出来的东西就很通熟易懂了,只是一个立即执行函数(以下只是一个示例,为了打包快点,去掉了其他内容)

image.png

那么还是使用不了,我现在也是很迷茫,不知道是哪一步出问题了,我想知道我的这样打包方式出错了吗?这个报错的原因是因为项目中的webpack.config.js文件中使用bable的处理配置不对吗还是打包时的配置不对?兄弟们知道的给我解答解答,下面附上我的打包webpack.config.js文件配置

image.png

image.png