Is there a way to load AMD modules from modules compiled with Webpack (at runtime over the network)?

Question

Is there a way to load AMD modules from modules compiled with Webpack (at runtime over the network)?

f.e., I have

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

where AmdModule is an AMD module that has a single define() call in it. I don't want webpack to compile that file and I don't want webpack to include it in the bundle. Maybe that file doesn't even exist at compile time, but will exist on the asset server. I want that file to be loaded at runtime, over the network.

Is there some way to make Webpack do that kind of stuff? I was thinking maybe to import that file with RequireJS, but then it breaks Webpack modules because there's no way to wait for the module to load and then export something asynchronously in webpack modules.

Ideally, I'd like for webpack to wait for those files to be loaded from the network before executing the module that needs it.

Is something like this possible?

As requirement, the to-be-loaded-by-network file can not be compiled, it must remain an AMD define() module loaded over the network, untouched, no source map needed.

Answer 1

Yes, you can, just add to externals:

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

I'm using it to pack my module/plugin to be load in a framework and the modules uses some modules from the target framework, so webpack should not include the modules. Externals does avoid include the framework modules inside my plugin module and still waiting for those modules to load on run time.

Externals are exactly for it:

Applications and externals

You can also use the externals option to import an existing API into applications. For example, if you want to use jQuery from a CDN via a separate tag while still explicitly declaring it as a dependency via require("jquery"), you would specify it as external like so: { externals: { jquery: "jQuery" } }.

@NicoD: External Indicates dependencies that should not be bundled by webPack but instead remain requested by the resulting bundle. To get the module you have to use a loader as script.js

Answer 2

Webpack can specify different methods ( AMD and CommonJs ) to load code on demand.

Here is an extract from the webpack guide :

To clarify a common misunderstanding: Code Splitting is not just about extracting common code into a shared chunk. The more notable feature is that Code Splitting can be used to split code into an on demand loaded chunk.

Regarding how you can configure how externals are exposed you can look at this sample ( webpack/examples/externals ) :

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