Webpack inter-library dependency as in requireJS.config.shim

Question

I am converting a grunt + requireJS build process to webpack. We have something like this:

require.config({
  shim:{
    'popover': {
        deps: ['tooltip']
      },
    'tooltip': {
      deps: ['jquery']
    }
  }    
})

Where we are specifically saying that tooltip depends on jquery so load jquery first. Popover depends on tooltip so load tooltip beforehand.

How do I translate this configuration into webpack 4 ? I've searched through the web trying to see if there are anything similar enough. Webpack's shimming doesn't do inter-library dependency. I don't see anything in the documentation too ...which surprised me much.

I have find articles ( https://gist.github.com/xjamundx/b1c800e9282e16a6a18e ) that suggest of use import-loader to achieve such effect. So my config is like this:

    module:{
        strictExportPresence:true,
        rules:[
            { parser: { requireEnsure: false } },
            { oneOf:[...bunch of stuffs for different file types] },
            { test : /tooltip/, loader: 'imports-loader?$=jquery' },
            { test : /popover/, loader: 'imports-loader?tooltip' }
        ]

also have the appropriate aliases in config set up.

the error I am getting it the browser is Constructor undefined on line "Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype ..." so tooltip library isn't being loaded before popover is. I also don't see any new code added by webpack, which I think this could be my first problem since imports-loader supposedly add the specified library into popover module right ?

I am exactly seeing what's wrong with my approach anymore and exhausted a lot of resources online. I am sure someone had to deal with this type of problem before, please shade some light for me. Thanks!

Answer 1

You should provide tooltip and popover in resolve.alias section:

resolve: {
    alias: {
        "jquery": "lib/jquery-x.x.x",
        "tooltip": "lib/tooltip-x.x.x",
        "popover": "lib/popover-x.x.x"
    }           
}

Otherwise webpack won't be able to resolve modules to shim by imports-loader . Also, please note that you misspelled imports-loader in your configuration.