webpack.ProvidePlugin with zepto

Question

I have a project which use zepto in lots of modules. As you know, webpack.ProvidePlugin is the best way to handle this scenario, with it, I do not need to import zepto in every module manually.

zepto doesn't export itself, so I can not import it with ProvidePlugin.

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

I know there is a zepto wrap called webpack-zepto .

But if I adopt this solution, every time when zepto update, I need to update the code myself.

Is there a method to solve my issue?

Answer 1

You can try script-loader :

webpack.config.js

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

It will read the zepto.min.js file and execute it, just as you put it in a script tag, then in your module, you can access zepto by window.$

UPDATE:

If you simply want to use $ instead of window.$ , you can require zepto.min.js file through exports-loader and 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'
    })
]