Webpack：如何为＆＃34; webpack＆＃34;创建一个加载器？需要一系列依赖项？

Question

例如，我在我的项目中使用AMD定义，并使用＆＃34; webpack＆＃34;用于项目建设。是否可以创建一些以数组格式依赖的加载器？

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

项目示例：gitHub

Answer 1

如果您想将<system.webServer> <handlers> <!--<remove name="OPTIONSVerbHandler" />--> </handlers> </system.webServer> - 插件的行为移植到webpack，您需要这样做：

1。创建自定义解析程序

这是因为load未指向单个文件。当webpack尝试加载文件时，首先：

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

由于mySuperLoader![./path/dependency-1, ./path/dependency-2, ...]不是正确的文件路径，因此还有一些工作要做。它甚至不是一个合适的JSON。

所以，我们的第一个目标是将其变为[./path/dependency-1, ./path/dependency-2, ...]。这通常通过创建自定义解析器来完成：

mySuperLoader!some/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); } } ] }; ？我们只需要给webpack一个现有文件，这样它就不会抛出错误。无论如何，我们将生成所有内容。可能不是最优雅的解决方案，但它确实有效。

2。创建我们自己的request.path = __filename; - 加载器（是的！）

load

这个加载器解析我们用自定义解析器重写的请求查询，并创建一个看起来像这样的CommonJS模块

// loadLoader.js
const path = require("path");

function loadLoader() {
    return JSON.parse(this.request.match(/\?(.+?)$/)[1])
        .map(module =>
            `exports['${path.basename(module, '.js')}'] = require('${module}');`
        )
        .join('\n');
}

module.exports = loadLoader;

3。别名我们自己的exports['dependency-1'] = require('path/to/dependency-1'); exports['dependency-2'] = require('path/to/dependency-2'); - 装载器

load

4。配置// webpack.config.js ... resolveLoader: { alias: { load: require.resolve('./loadLoader.js') } },

由于root是root-relative，我们需要将root添加到webpack config

/path/to/dependency-1

这既不是一个美丽的解决方案，也不是一个理想的解决方案，但在你移植模块之前，它应该像临时工作一样。

Answer 2

我认为你不应该使用装载机。你为什么不写：

{
    "poi": [
        {
            "Name": "Flensburg Firth",
            "Shorttext": "Flensburg Firth or Flensborg Fjord ....",
            "Longitude": 9.42901993,
            "Latitude": 54.7959404,
            "Image": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Flensborg_Fjord_ved_bockholmwik.jpg/400px-Flensborg_Fjord_ved_bockholmwik.jpg"
        },


        {
            "Name": "Naval Academy Mürwik",
            "Shorttext": "The Naval Academy Mürwik is the main train....",
            "Longitude": 9.45944444,
            "Latitude": 54.815,
            "Image": "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/MSM-hauptgebaeude.jpg/400px-MSM-hauptgebaeude.jpg"

        },
        {
            "Name": "Nordertor",
            "Shorttext": "The Nordertor is an old town gate in Flensburg, Germany....",
            "Longitude": 9.43004861,
            "Latitude": 54.79541778,
            "Images": "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Nordertor_im_Schnee_%28Flensburg%2C_Januar_2014%29.JPG/266px-Nordertor_im_Schnee_%28Flensburg%2C_Januar_2014%29.JPG"
        }
    ]
}

它完成同样的事情，更具表现力，不需要额外的代码/加载器/黑客/配置。

如果您仍然不满意，可能会对following doc感兴趣，因为它允许您需要大量与给定过滤器匹配的文件。所以，如果你写的话

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

webpack包含此表达式可以访问的所有模块，而无需访问父目录。它与编写

基本相同

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

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

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