Javascript 网页包：如何为“创建加载程序”；“网页包”；哪个需要一系列依赖项？

例如，我在我的项目中使用AMD定义，在项目构建中使用“webpack”。是否可以创建一些加载程序，它将以数组格式接受依赖项

define(
    [
        'mySuperLoader![./path/dependency-1, ./path/dependency-2, ...]'
    ],
    function() {
        // ... some logic here
    }
)

---

项目示例：

我认为您不应该为此使用加载程序。你为什么不写下：

require("./path/dependency-1");
require("./path/dependency-2");
require("./path/dependency-3");

它实现了同样的功能，表现力更强，不需要额外的代码/加载程序/黑客/配置

如果您仍然不满意，您可能会感兴趣的是，哪一个允许您需要与给定过滤器匹配的大量文件。所以，如果你写

require("./template/" + name + ".jade");

webpack包含此表达式可以访问的所有模块，而无需访问父目录。这和写作基本上是一样的

require("./table.jade");
require("./table-row.jade");
require("./directory/folder.jade")

您也可以像这样手动创建上下文

var myRequire = require.context(
    "./template",   // search inside this directory
    false,         // false excludes sub-directories
    /\.jade$/      // use this regex to filter files
);

var table = myRequire("./table.jade");

exports['dependency-1'] = require('path/to/dependency-1');
exports['dependency-2'] = require('path/to/dependency-2');

---

如果要将

加载

-插件的行为移植到网页包，需要执行以下操作：

1.创建自定义解析器 这是因为

mySuperLoader！[./path/dependency-1，./path/dependency-2，…]

不指向单个文件。当webpack尝试加载文件时，它首先：

• 解析文件路径
• 加载文件内容
• 匹配并解析所有加载程序
• 将文件内容传递给加载程序链

由于

[./path/dependency-1，./path/dependency-2，…]

不是正确的文件路径，因此需要做一些工作。它甚至不是一个正确的JSON

所以，我们的第一个目标是把它变成

mySuperLoader！一些/random/file？[“/path/dependency-1”、“/path/dependency-2”、…]

。这通常通过创建自定义解析器来完成：

// webpack.config.js
var customResolverPlugin = {
    apply: function (resolver) {
        resolver.plugin("resolve", function (context, request) {
            const matchLoadRequest = /^\[(.+)]$/.exec(request.path);

            if (matchLoadRequest) {
                request.query = '?' + JSON.stringify(
                    matchLoadRequest[1]
                    .split(", ")
                );
                request.path = __filename;
            }
        });
    }
};

module.exports = {
    ...
    plugins: [
        {
            apply: function (compiler) {
                compiler.resolvers.normal.apply(customResolverPlugin);
            }
        }
    ]
};

注意

request.path=\u文件名？我们只需要给webpack一个现有的文件，这样它就不会抛出错误。无论如何，我们将生成所有内容。可能不是最优雅的解决方案，但它确实有效

2.创建我们自己的
load
-loader（耶！）
这个加载器解析我们用自定义解析器重新编写的请求查询，并创建一个如下所示的CommonJS模块

var myRequire = require.context(
    "./template",   // search inside this directory
    false,         // false excludes sub-directories
    /\.jade$/      // use this regex to filter files
);

var table = myRequire("./table.jade");

exports['dependency-1'] = require('path/to/dependency-1');
exports['dependency-2'] = require('path/to/dependency-2');

3.别名我们自己的
load
-loader
4.配置
root
由于
/path/to/dependency-1
是根相关的，因此我们需要将根添加到网页包配置中

// webpack.config.js
resolve: {
    root: '/absolute/path/to/root' // usually just __dirname
},


这既不是一个完美的解决方案，也不是一个理想的解决方案，但在移植模块之前，它应该是一个临时解决方案。
require（“./path/dependency-1”）-这是一个很好的方法，但我有一个项目是使用“requirejs”加载模块，使用“r.js”构建的。我正在尝试通过webpack将项目从r.js-building“软”移动到build，我需要我的requirejs loader-plugin周围的一些包装。那么，上下文是您的一个选项吗？谢谢您的回答，我补充说，也许，这有助于为我找到合适的解决方案。非常感谢！你的回答特别有用！