Question

有没有办法从使用Webpack编译的模块加载AMD模块（在运行时通过网络）？

f.e。，我有

import Blah from './Blah'
import AmdModule from './AmdModule'

其中AmdModule是一个AMD模块，其中只有一个define()调用。我不希望webpack编译该文件，我不希望webpack将它包含在bundle中。也许该文件在编译时甚至不存在，但会存在于资产服务器上。我希望通过网络在运行时加载该文件。

有没有办法让Webpack做那种东西？我想也许可以用RequireJS导入该文件，但随后它会破坏Webpack模块，因为没有办法等待模块加载然后在webpack模块中异步导出某些东西。

理想情况下，我希望webpack在执行需要它的模块之前等待从网络加载这些文件。

这样的事情可能吗？

根据要求，无法编译要加载的网络文件，它必须保留在网络上加载的AMD define（）模块，不受影响，不需要源地图。

Answer 1

是的，你可以，只需添加到外部：

module.exports = {
   ... (all config stuff),
   output: {
     filename: "[name].js",
     path: path,
     libraryTarget: 'amd'
   },
   externals : [
      'module the AmdModule is requiring'
  ]
}

我使用它来打包我的模块/插件以在框架中加载，并且模块使用目标框架中的一些模块，因此webpack不应包含模块。外部确实避免在我的插件模块中包含框架模块，并且仍在等待运行时加载这些模块。

外部是完全适合它：

应用程序和外部

您还可以使用externals选项将现有API导入应用程序。例如，如果您想通过单独的标记从CDN使用jQuery，同时仍然通过require（＆＃34; jquery＆＃34;）明确地将其声明为依赖项，则可以将其指定为外部，如下所示：{externals：{ jquery：＆＃34; jQuery＆＃34; }。

@NicoD：External表示不应由webPack捆绑但仍由生成的捆绑包请求的依赖项。要获取模块，您必须使用加载程序script.js

Answer 2

Webpack可以指定不同的方法（AMD和CommonJs）来加载按需代码。

以下是the webpack guide的摘录：

澄清一个常见的误解：Code Splitting不仅仅是关于将公共代码提取到共享块中。更值得注意的功能是Code Splitting可用于将代码拆分为按需装好的块。

关于如何配置外部暴露的方式，您可以查看此示例（webpack/examples/externals）：

module.exports = {
    output: {
        libraryTarget: "umd"
    },
    externals: [
        "add",
        {
            "subtract": {
                root: "subtract",
                commonjs2: "./subtract",
                commonjs: ["./math", "subtract"],
                amd: "subtract"
            }
        }
    ]
}

有没有办法从使用Webpack编译的模块加载AMD模块（在运行时通过网络）？

2 个答案: