Unfortunately, no. webpack 2 does not directly support System.import() and translates it to require.ensure() calls which utilize the <script> tag. Even the official WHATWG Loader Spec lacks an API for this functionality. An issue has been raised on this topic, which you can find here.
If you're keen on implementing your own version of require.ensure(), it is possible but requires a deeper dive into webpack's workings. Understanding how webpack handles chunk loading involves exploring its internal plugins. By studying WebpackOptionsApply, or searching for specific code snippets, you can gain insights into webpack's inner mechanisms.
Chunk loading in webpack varies based on the specified target, as different environments demand different implementations. Custom targets can be defined in webpack by passing a function instead of a string, allowing for unique plugin applications tailored to specific needs.
// webpack.config.js
const NodeSourcePlugin = require("webpack/lib/node/NodeSourcePlugin");
const FunctionModulePlugin = require("webpack/lib/FunctionModulePlugin");
const LoaderTargetPlugin = require("webpack/lib/LoaderTargetPlugin");
const JsonpChunkTemplatePlugin = require("webpack/lib/JsonpChunkTemplatePlugin");
const JsonpHotUpdateChunkTemplatePlugin = require("webpack/lib/JsonpHotUpdateChunkTemplatePlugin");
function customTarget(compiler) {
compiler.apply(
new JsonpTemplatePlugin(compiler.options.output),
new FunctionModulePlugin(compiler.options.output),
new NodeSourcePlugin(compiler.options.node),
new LoaderTargetPlugin("web")
);
}
module.exports = {
entry: require.resolve("./app/main.js"),
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
target: customTarget
};
To delve deeper, the XHRTemplatePlugin can replace the existing JsonpTemplatePlugin responsible for loading chunks, in our custom implementation:
function customTarget(compiler) {
compiler.apply(
new XHRTemplatePlugin(compiler.options.output),
new FunctionModulePlugin(compiler.options.output),
new NodeSourcePlugin(compiler.options.node),
new LoaderTargetPlugin("my-custom-target")
);
}
The XHRTemplatePlugin dictates code provision in main and child chunks alongside hot updates:
function XHRTemplatePlugin() {}
XHRTemplatePlugin.prototype.apply = function (compiler) {
compiler.plugin("this-compilation", function(compilation) {
compilation.mainTemplate.apply(new XHRMainTemplatePlugin());
compilation.chunkTemplate.apply(new XHRChunkTemplatePlugin());
compilation.hotUpdateChunkTemplate.apply(new XHRHotUpdateChunkTemplatePlugin());
});
};
Consider re-using the JsonpChunkTemplatePlugin and
JsonpHotUpdateChunkTemplatePlugin
based on your use-case. Your
XHRMainTemplatePlugin could look like this:
function XHRMainTemplatePlugin() {}
XHRMainTemplatePlugin.prototype.apply = function (mainTemplate) {
mainTemplate.plugin("require-ensure", function(_, chunk, hash) {
return this.asString([
// Add your custom implementation here
"fetch()"
]);
});
};
This answer provides a glimpse into tweaking chunk loading within webpack. Explore real examples and webpack outputs for clarity, and don’t hesitate to draw inspiration from webpack's internal mechanisms.