webpack.ProvidePlugin 与 zepto

Question

我有一个在很多模块中使用 zepto 的项目。
如您所知，webpack.ProvidePlugin 是处理这种情况的最佳方式，有了它，我不需要在每个模块中手动导入 zepto。

zepto 不会自己导出，所以我不能用 ProvidePlugin 导入它。

 plugins: [
    new webpack.ProvidePlugin({
      $: 'zepto'
    })
  ]

我知道有一个叫做 webpack-zepto 的 zepto wrap .

但是如果我采用这种方案，每次zepto更新的时候，我都需要自己更新代码。

有没有办法解决我的问题？

Answer 1

你可以试试script-loader :

webpack.config.js

loaders: [
    {
        test: require.resolve('zepto/zepto.min.js'),
        loader: 'script'
    }
]
plugins: [
    new webpack.ProvidePlugin({
        $: 'zepto/zepto.min.js'
    })
]

它将读取 zepto.min.js文件并执行它，就像你把它放在一个脚本标签中一样，然后在你的模块中，你可以通过 window.$访问zepto

更新:

如果您只是想使用 $而不是 window.$ , 你可以通过 exports-loader 获取 zepto.min.js 文件和 script-loader :

webpack.config.js

loaders: [
    {
        test: require.resolve('zepto/zepto.min.js'),
        loader: 'exports?window.$!script'
    }
]
plugins: [
    new webpack.ProvidePlugin({
        $: 'zepto/zepto.min.js'
    })
]