有哪些方法可以组织 webpack 代码？答案

【问题标题】：What ways are there to organize the webpack code?有哪些方法可以组织 webpack 代码？
【发布时间】：2021-08-19 14:31:29
【问题描述】：

我不知道它是否符合这个问题，但我一直在阅读一些代码，因为我现在正在学习 webpack，所以我在其中的一些中遇到了下面的这种代码结构，我想知道是什么样的有组织的结构是这样的，我需要知道什么才能开始使用这种结构来组织我的代码？

require = function () {

    //Some code

}()({
    1: [function (require, module, exports) {
        function hello(){
          console.log('hello');
        }
        module.exports = hello;
    }, {}],
    
    2: [function (require, module, exports) {
      //Some code
    }, {}],
    
    3: [function (require, module, exports) {
      //Another code
    }, {}],

    4:...,

})

【问题讨论】：

这段代码是通过 Webpack 编译的东西（即 Webpack 的输出）吗？如果是这样，你不要这样做。
@crashmstr 是的，我正在阅读一些脚本，我注意到它们以这种方式与 webpack 一起工作，这让我很感兴趣，因为代码的组织。
那是因为require不是浏览器“理解”的东西，所以Webpack在处理代码和所有require和import和其他模块“东西”时，使它“工作”。作为使用 Webpack 的开发人员，您通常不需要知道它是如何工作的。

标签： javascript webpack

【解决方案1】：

这不是webpack，这是Browserify，结构是这样的：

(function() {
    function r(e, n, t) {
        function o(i, f) {
            if (!n[i]) {
                if (!e[i]) {
                    var c = "function" == typeof require && require;
                    if (!f && c)
                        return c(i, !0);
                    if (u)
                        return u(i, !0);
                    var a = new Error("Cannot find module '" + i + "'");
                    throw a.code = "MODULE_NOT_FOUND",
                    a
                }
                var p = n[i] = {
                    exports: {}
                };
                e[i][0].call(p.exports, function(r) {
                    var n = e[i][1][r];
                    return o(n || r)
                }, p, p.exports, r, e, n, t)
            }
            return n[i].exports
        }
        for (var u = "function" == typeof require && require, i = 0; i < t.length; i++)
            o(t[i]);
        return o
    }
    return r
}
)()({
    1: [function(require, module, exports) {
    }
    , {}]
}, {}, [1]);

【讨论】：