Webpack loader 等效于使用 XMLHttpRequest 加载 requirejs 插件答案

【问题标题】：Webpack loader equivalent of requirejs plugin load with XMLHttpRequestWebpack loader 等效于使用 XMLHttpRequest 加载 requirejs 插件
【发布时间】：2016-06-30 02:30:00
【问题描述】：

我有一对 requirejs 插件，我想用 webpack 加载器替换它们。

define('firstLoader', {
  load: function (name, parentRequire, onload, config) {
    var xhr = new XMLHttpRequest();
    
    xhr.addEventListener('load', function () {onload(this.responseText);});
    xhr.addEventListener('error', onload.error);
    xhr.addEventListener('abort', onload.error);

    var url = '...' + name;
    xhr.open('GET', url);
    xhr.send()
  }
})

define('jsonLoader', {
  load: function (name, parentRequire, onload, config) {
    //This is the nasty part.
    req(['firstLoader!' + name], function (text) {
      try {
        onload(JSON.parse(text));
      }
      catch (err) {
        onload.error(err);
      }
    })
  }
});

最大的问题是缺乏对异步请求和动态需求的承诺。没有转译（使用`System.load）或其他库（蓝鸟等）有没有办法解决这个问题？

编辑

所以我已经解决了这个问题，现在我遇到了一个错误

Module not found: Error: Can't resolve 'future/url'

当我去require('jsonLoader!future/url')。 webpack 是否允许加载器在运行时运行？这是更新后的代码。

firstPlugin.js

module.exports = function loadAsync (content, callback) {
      var host = document.location.host
      var url = host + '...' + name
      xhr.addEventListener("load", function () {callback(null, this.responseText)})
      xhr.open("GET", url)
      xhr.send()
    }
}

jsonPlugin.js

module.exports = function (content, callback) {
  require('firstPlugin!' + content, function (result) {
      callback(null, JSON.parse(result))
  })
}

【问题讨论】：

Webpack 类似物是 bundle-loader?lazy ( github.com/webpack/bundle-loader ) 和 json-loader ( github.com/webpack/json-loader )。

标签： javascript webpack amd loader

【解决方案1】：

Require 和 Webpack 只是根本不同的模式。它们都与“模块”和“加载”有关，但除此之外......

一般来说，Webpack 纯粹是一个编译/构建时工具。所以，不，它的加载器不能在运行时运行。但是，Webpack 可以在构建时创建多个包，您可以在运行时单独调用/下载它们。根据您希望如何调用这些附加包（从模块内部或从特定“页面”），您感兴趣的 Webpack 概念是 Code Splitting 和 Entry Points。

【讨论】：

这些链接已损坏。
Webpack 链接已修复，@DavidKnipe！