Javascript 在Webpack中，如何使用自定义源模板来构造特定的模块

我知道网页包内部的一些功能。有关依赖项、模板和模块构建的内容。然而，在其源代码中几乎没有评论，目前也没有完整的文档站点。所以，我不能把它们都锁起来来解决我的问题

根据我当前的需求，我需要使用自定义源模板（）呈现特定的模块

注意：要清楚，生成的模块的依赖项数组不是静态的。例如，一次可能是

['./a'，'./b'，'./c']

，另一次可能是

['./b'，'./c'，'./d']

。这取决于构建之前的一些动态配置

关于更详细的示例，我需要一个模块调用

main.js

。在构建时，需要使用目标依赖项动态生成它，如（不确定哪些模块将是依赖项）：

事实上，如果我只需要动态地

require

all，我就可以动态地构造一个入口点

// webpack.config.js
{
    entry: {
        main: [
            './a',
            './b',
            './c',
            ...
        ]
    },
}

它（webpack）将生成一个模块，可能如下所示：

__webpack_require__(1);
__webpack_require__(2);
__webpack_require__(3);

return __webpack_require__(4);

但是我需要做更多的事情：

var a = __webpack_require__(1);
var b = __webpack_require__(2);
var c = __webpack_require__(3);
var d = __webpack_require__(4);
...

// do something with a,b,c,d... under my custom need
...

return somthing or nothing;

正如你们这些了解webpack的人一样，它非常复杂，很难理解和跟踪它的插件（事件）层次结构

需要一些专业知识！：）

---

对不起，我以前提过一个不清楚的问题

然而，这里有一种奇怪的气氛。我设立了一个赏金来寻求关注和指导。有人自由的回答不知怎的让我做出了不礼貌的评论。然后一些和事佬带着与问题或答案无关的评论出现了。那太糟糕了

---

专注于那件事只会让事情变得更糟，没有任何帮助。不放手只意味着有人心胸狭窄。

通常在网页中，你只需要一个文件，可能还需要文件所依赖的不同库。如果您需要main，那么webpack将基于您可以阅读的CommonJS语法来解析依赖关系。删除webpack.config.js文件中的额外要求是否可以解决此问题？e、 g.仅具有以下配置：

// webpack.config.js
{
  entry: [ "./main" ],
  ...
}

听起来您似乎并不真正了解webpack是如何工作的——它的想法是模拟Node的CommonJS语法如何允许javascript模块化并放在单独的文件中，同时还具有良好的性能，不需要浏览器发出大量AJAX请求。如果您想阅读有关网页包配置文件的更多信息

---

---

作为旁注，在模块末尾返回完全没有任何作用。如果您想导出，可以使用

module.exports

，但是在

main.js

文件的末尾有一行类似于

return true

的内容，并不会发现任何有意义的内容。

通常在网页包中，您只需要一个文件，并且可能需要文件所依赖的不同的lib。如果您需要main，那么webpack将基于您可以阅读的CommonJS语法来解析依赖关系。删除webpack.config.js文件中的额外要求是否可以解决此问题？e、 g.仅具有以下配置：

// webpack.config.js
{
  entry: [ "./main" ],
  ...
}

听起来您似乎并不真正了解webpack是如何工作的——它的想法是模拟Node的CommonJS语法如何允许javascript模块化并放在单独的文件中，同时还具有良好的性能，不需要浏览器发出大量AJAX请求。如果您想阅读有关网页包配置文件的更多信息

---

---

作为旁注，在模块末尾返回完全没有任何作用。如果你想导出，你可以使用

module.exports

，但是在

main.js

文件的末尾有一行像

return true

或类似的东西并没有得到任何有意义的提示。

要么缺乏关注，要么缺乏专家，我必须自己去解决它。幸运的是，挖掘网页包取得了一些进展

先决条件 在流行webpack的前一天，有grunt和gulp这样的时尚来构建自定义构建流（使用它们的插件）。它们可以实现大部分定制需求，尤其是生成定制模块（webpack没有明显和直接的方法来处理）

当您开始做一些像自动收集自定义依赖项这样的事情时，生成自定义模块是下一个重要步骤。这在产品线/系列设计中很常见

解决 #1 这是最简单直接的方法，但缺乏灵活性

的

source

方法是生成具有多个依赖项的条目模块。只要越过它就会击中目标

// hack.js
const MultiModule = require('webpack/lib/MultiModule')

MultiModule.prototype.source = function(dependencyTemplates, outputOptions) {
    var str = ['"hello world";\n'];
    this.dependencies.forEach(function (dep, idx) {
        if (dep.module) {
            if (idx === this.dependencies.length - 1)
                str.push("module.exports = ");
            str.push("__webpack_require__(");
            if (outputOptions.pathinfo)
                str.push("/*! " + dep.request + " */");
            str.push("" + JSON.stringify(dep.module.id));
            str.push(")");
        } else {
            str.push("(function webpackMissingModule() { throw new Error(");
            str.push(JSON.stringify("Cannot find module \"" + dep.request + "\""));
            str.push("); }())");
        }
        str.push(";\n");
    }, this);

    return new RawSource(str.join(""));
}

在第五行，我添加了一个string语句

“helloworld；”\n

，没有其他更改

module.exports = {
    entry: {
        main: ["./a", "./b"],
    }
    // something else
}

输出

main.js

可能如下所示：

//...
/* 0 */
/*!******************!*\
  !*** multi main ***!
  \******************/
/***/ function(module, exports, __webpack_require__) {

    "hello world";
    __webpack_require__(/*! ./a */1);
    module.exports = __webpack_require__(/*! ./b */2);

/***/ }
//...

现在，我们可以使用源方法做我们想做的事情，同时考虑兼容性

#2 这种方式更灵活，但也更复杂

它至少需要5个文件（源文件太长，我把它们做成了代码段）：

CustomMultiModule.js

：

//custommultimultule.js
const multimultimule=require（'webpack/lib/multimultimule'）
const RawSource=require（'webpack/lib/RawSource'）
类CustomMultiModule扩展了MultiModule{
构造函数（…参数）{
超级（…args）
}
源（依赖模板、输出选项）{
var str=['“你好，世界”；']；
this.dependentials.forEach（函数（dep，idx）{
if（副模块）{
if（idx==this.dependencies.length-1）
str.push（“module.exports=”）；
str.push（“\uuuuu网页包\uuu需要””）；
if（outputOptions.pathinfo）
str.push（“/*！”+dep.request+“*/”）；
str.push（“+JSON.stringify（dep.module.id））；
str.push（“）”；
}否则{
str.push（“（函数webpackMissingModule（）{抛出新错误（”）；
str.push（JSON.stringify（“找不到模块\”+dep.request+“\”）；
str.push（“）；}（）”；
}
str.push（“；\n”）；
},