所以我刚刚更新到 webpack 2 并且有了我的第一个工作设置,其中 webpack 通过查看 System.import 调用自动创建块。好甜!
但是,我使用 ajax 调用加载初始块,以便在加载时显示进度
所以我的问题是,我能否以某种方式覆盖或更改 System.import 的功能,以便它使用我可以监听事件的 ajax 请求,而不是加载带有<script>
标签的块?
所以我刚刚更新到 webpack 2 并且有了我的第一个工作设置,其中 webpack 通过查看 System.import 调用自动创建块。好甜!
但是,我使用 ajax 调用加载初始块,以便在加载时显示进度
所以我的问题是,我能否以某种方式覆盖或更改 System.import 的功能,以便它使用我可以监听事件的 ajax 请求,而不是加载带有<script>
标签的块?
不,很遗憾没有。webpack 2 转换为只使用标签System.import()
的普通调用。甚至官方的WHATWG Loader Spec也没有为此类事件提供 API。我为这个问题创建了一个问题。require.ensure()
<script>
关于 webpack:有一种方法可以实现你自己的require.ensure()
. 然而,由于块加载是 webpack 的一个组成部分,这需要深入一点。我不确定这对你有多重要,但你可能会对 webpack 内部的工作方式感兴趣,所以让我们看一下:
在 webpack 中,所有内部功能都作为插件实现。通过这种方式,webpack 能够支持很多不同的特性和环境。所以,如果你对 webpack 中的实现方式感兴趣,a) 看一下WebpackOptionsApply
或 b) 搜索特定的字符串/代码片段总是一个好主意。
块加载很大程度上取决于给定的target
,因为每个环境都需要不同的实现。Webpack 允许您定义自定义目标。当你传入一个函数而不是一个字符串时,webpack 会使用一个compiler
实例调用该函数。在那里您可以应用所有必需的插件。由于我们的自定义目标几乎就像web
目标一样,我们只需从目标中复制所有内容web
:
// 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
};
如果您查看每个插件,您会发现它们JsonpTemplatePlugin
负责加载块。所以让我们用自己的实现来替换它。我们称之为XHRTemplatePlugin
:
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")
);
}
我们XHRTemplatePlugin
负责在主块、每个子块和热更新中提供代码:
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());
});
};
也许,您也可以重新使用JsonpChunkTemplatePlugin
andJsonpHotUpdateChunkTemplatePlugin
插件,但这取决于您的用例/实现。
您的XHRMainTemplatePlugin
现在可能如下所示:
function XHRMainTemplatePlugin() {}
XHRMainTemplatePlugin.prototype.apply = function (mainTemplate) {
mainTemplate.plugin("require-ensure", function(_, chunk, hash) {
return this.asString([
// Add your custom implementation here
"fetch()"
]);
});
};
我不会在这里再进一步,因为我认为这个答案已经足够长了。但我建议创建一个真正的小示例项目并检查 webpack 创建的输出。内部的 webpack 插件乍一看可能有点吓人,但它们中的大多数都很短而且只做一件事。你也可以从他们那里得到一些灵感。