Webpack模块依赖，就像在requirerequirements中一样

Webpack modules dependencies like in requirejs

本文关键字：一样 requirerequirements 依赖 模块 Webpack      更新时间：2023-09-26

我想从requirejs迁移到webpack，在requirejs配置中我有:

 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和jquery.ui.widget是jquery.ui.mouse的依赖关系。如何使webpack加载这些模块作为jquery.ui.mouse的依赖?

webpack在shim配置属性中的依赖项是什么?

需要为shim使用"imports-loader": 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"
}, ...]

对于path应该使用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',
    ...
  }
...
}
相关文章：