javascript - webpack如何打包组件才能用script标签直接引用？

问题描述

问 题

想尝试用webpack打包组件，于是用之前写的放大镜的函数来做测试，函数结构如图所示

未打包前的js文件用script直接引用是可以的，但是打包后用script直接引用打包后的js文件，一直报错说magnifier not defined，如图所示

打包后的js文件没有暴露magnifier这个函数吗？打包后的js文件怎么样才能用script直接引用呢？谢谢

解决方案

搜webpack umd,可以兼容处理各种引用模式。但是同时最好将你想用window引用的文件单独打包。
当然你写的时候还是要遵循模块化规范的,例如export default magnifier。
同时使用es6的模块化，可能会遇到window.magnifier.default才能引用到你要暴露的函数的问题，这个时候可以开启webpack3.0添加的新配置libraryExport: "default"解决这个问题。非es6模块化规范请勿配置。
(其实最方便的是。。。你直接在js文件里写个window.magnifier = magnifier)

这篇关于javascript - webpack如何打包组件才能用script标签直接引用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！