Webpack 打包 Zepto 小 tip，避免走坑

[ch1oechao]

用 webpack 的 loader 对 zepto 库进行改造

1.安装 script-loader exports-loader

npm i -D script-loader exports-loader 

2.Webpack 配置

module: {
  rules: [{
    test: require.resolve('zepto'),
    use: ['exports-loader?window.Zepto','script-loader']
  }]
}

原理

script-loader
可以在我们 import/require 模块时，在全局上下文环境中运行一遍模块 JS 文件（不管 require 几次，模块仅运行一次）。script-loader 把我们指定的模块 JS 文件转成纯字符串，并用 eval.call(null, string) 执行，这样执行的作用域就为全局作用域了。

exports-loader
exports-loader 可以导出我们指定的对象: require('exports?window.Zepto!./zepto.js') ，它的作用就是在模块闭包最后加一句 module.exports = window.Zepto 来导出我们需要的对象，这样就可以愉快地 import $ from 'zepto' 了。

详情查看： https://sebastianblade.com/how-to-import-unmodular-library-like-zepto/