Webpack 模块依赖关系，如 requirejs

Question

我想从 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 的依赖项？

在 shim 配置属性中 webpack 的替代依赖项是什么？

Answer 1

需要为 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',
    ...
  }
...
}

Webpack 模块依赖关系，如 requirejs

Webpack modules dependencies like in requirejs

javascript

jquery

requirejs

amd

webpack