Search code examples
javascriptjqueryrequirejsamdwebpack

Webpack modules dependencies like in requirejs


I want to migrate from requirejs to webpack and in requirejs config I have:

 paths: {
   'jquery.ui.core': 'lib/jquery.ui/jquery.ui.core-1.11.4',
   'jquery.ui.draggable': 'lib/jquery.ui/jquery.ui.draggable-1.11.4',
   'jquery.ui.mouse': 'lib/jquery.ui/jquery.ui.mouse-1.11.4',
   'jquery.ui.widget': 'lib/jquery.ui/jquery.ui.widget-1.11.4',
 ...
 shim: {
   'jquery.ui.mouse': ['jquery.ui.core', 'jquery.ui.widget'],
 ....

jquery.ui.core and jquery.ui.widget are dependencies of jquery.ui.mouse. How to make webpack load this modules as dependencies of jquery.ui.mouse ?

What webpack's alternative of dependencies in shim config property ?


Solution

  • Need to use "imports-loader" for shim: https://github.com/webpack/imports-loader

    loaders: [..., {
       // if use npm module 'jquery-ui' instead of 'lib/...' directory in question
       include: require.resolve('jquery-ui/ui/mouse'), 
       loader: "imports-loader?dep1=jquery.ui.core&dep2=jquery.ui.widget"
    }, ...]
    

    And for path should use resolve.alias

    resolve: {
      ...
      alias: {
        'jquery.ui.core': 'jquery-ui/ui/core',
        'jquery.ui.draggable': 'jquery-ui/ui/draggable',
        'jquery.ui.droppable': 'jquery-ui/ui/droppable',
        'jquery.ui.mouse': 'jquery-ui/ui/mouse',
        'jquery.ui.sortable': 'jquery-ui/ui/sortable',
        'jquery.ui.widget': 'jquery-ui/ui/widget',
        ...
      }
    ...
    }