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

Question

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

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

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

Answer 1

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

Answer 2

webpack 打包一个目的是增加了代码 amd umd 规范（配置有选项），方便import 和require（这些不打包前是不能使用import引入的， 你手动添加这些固定规范代码也可以的）

如楼上说的直接加上window.magnifier = magnifier 就可以了，打不打包都能直接引用