Question

我正在将一个grunt + requireJS构建过程转换为webpack。我们有这样的东西：

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

我们特别要指出的是，工具提示取决于jquery，因此请先加载jquery。弹出窗口取决于工具提示，因此请事先加载工具提示。

如何将此配置转换为webpack 4？我在网上搜索过，以尝试是否有足够类似的东西。 Webpack的填充不执行库间依赖。我也没有在文档中看到任何东西……这让我非常惊讶。

我找到了文章（https://gist.github.com/xjamundx/b1c800e9282e16a6a18e）建议使用import-loader实现这种效果。所以我的配置是这样的：

    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' }
        ]

在配置设置中也具有适当的别名。

我得到的错误是浏览器是构造函数未定义的行 “ Popover.prototype = $ .extend（{}，$ .fn.tooltip.Constructor.prototype ...” 因此，不会在弹出窗口之前加载工具提示库。我也没有看到webpack添加任何新代码，我认为这可能是我的第一个问题，因为imports-loader应该将指定的库添加到popover模块中了吗？

我完全知道自己的方法有什么问题，并耗尽了许多在线资源。我敢肯定有人必须处理过此类问题，请为我遮挡一些阴影。谢谢！

Answer 1

您应在tooltip部分中提供popover和resolve.alias：

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

否则，Webpack将无法解析模块以imports-loader进行填充。另外，请注意，您在配置中拼写了imports-loader。

Webpack库间依赖关系，如requireJS.config.shim

1 个答案: