webpack + leaflet插件

Question

I have a requireJs-based library, that exports object T , which holds Leaflet object L . And I have a Leaflet plugin ( this , in my case, but valid for any other), which adds some functions to the global object L . And I have my module, where I want to use object T with extended L . Question: how to gracefully do it with Webpack? I could modify the plugin, to import L from the first library, but anyway don't understand how to plug it in to my module. And not sure that this is the best way.

PS I saw this thread, and this as well, but didn't find a good way there. I don't want to use additional < script> tags, and this is quite rambled to have statements like this:

import 'my.leflet.library';
import 'leaflet.plugin';

somewhere in the source - instead, I would prefer to add something to the configuration, that will extend L object right after 'my.leaflet.library' would be loaded, and any module, that would import 'my.leaflet.library' will have T with modified L . Is it possible?

Answer 1

This is my webpack config for Vue (vue.config.js), you can probably adapt it for your needs.

const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        L: 'leaflet',
        'window.L': 'leaflet',
      })
    ],
  }
}