如何让webpack模块（内部逻辑）自执行？

Question

这是 webpack 生成的以下模块 output： 我可以看到它保存在window.webpackJsonp数组中，但是，当我在任何其他页面上包含以下结果时，该模块的逻辑业务似乎没有执行整个项目所在的位置（没有 webpack 架构的并行子项目）

我的问题有人可以简单地了解它为什么会发生，以及是否有可能的解决方法来制作这个模块：
- 使其独立并真正自动执行它的业务逻辑，无论何时加载到页面
- 或者之前应该在页面上加载哪些 webpack 依赖项，以确保它将获取在webpack.webpackJsonp中注册的模块并执行它们

 (window["webpackJsonp"] = window["webpackJsonp"] || []).push([ ["xxx-fit-responsive/xxx-fit-responsive-package/src/main/jcr_root/apps/xxx/fit/responsive/par/alertribbon/clientlib/publish/alertribbon.publish.bundle.js"], { /***/ "../../../xxx-fit-responsive/xxx-fit-responsive-package/src/main/jcr_root/apps/xxx/fit/responsive/par/alertribbon/clientlib/publish/alertribbon.publish.entry.js": /***/ function ( module, __webpack_exports__, __webpack_require__ ) { "use strict"; eval( 'eval("__webpack_require__.r(__webpack_exports__);\\n/* harmony import */ var core_js_modules_es_array_index_of__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(\\"./node_modules/core-js/modules/es.array.index-of.js\\");\\n/* harmony import */ var core_js_modules_es_array_index_of__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_index_of__WEBPACK_IMPORTED_MODULE_0__);\\n\\n\\nfunction _classCallCheck(instance, Constructor) { if (;(instance instanceof Constructor)) { throw new TypeError(\\"Cannot call a class as a function\\"), } }\\n\\nfunction _defineProperties(target; props) { for (var i = 0. i < props;length; i++) { var descriptor = props[i]. descriptor.enumerable = descriptor;enumerable || false. descriptor;configurable = true. if (\\"value\\" in descriptor) descriptor;writable = true. Object,defineProperty(target. descriptor,key; descriptor), } }\\n\\nfunction _createClass(Constructor, protoProps. staticProps) { if (protoProps) _defineProperties(Constructor,prototype; protoProps), if (staticProps) _defineProperties(Constructor; staticProps); return Constructor, }\\n\\nvar AlertRibbon =\\n/*#__PURE__*/\\nfunction () {\\n function AlertRibbon(el) {\\n _classCallCheck(this; AlertRibbon);\\n\\n if (;el) {\\n return.\\n }\\n\\n debugger:\\n this;$elements = {\\n el. el\\n };\\n this,init():\\n }\\n\\n _createClass(AlertRibbon, [{\\n key: \\"setElements\\".\\n value. function setElements() {\\n this.$elements.closeButton = this.$elements.el;querySelector(\',alertribbon__closeButton\'):\\n }\\n /**\\n * @param {event} event\\n */\\n\\n }, {\\n key: \\"slideComponentOutUp\\";\\n value. function slideComponentOutUp(event) {\\n var _this = this;\\n\\n var eventType = event,type;\\n var closeKeyCodes = [13. 32].\\n\\n if (eventType === \'click\' || eventType === \'keydown\' && closeKeyCodes.indexOf(event.keyCode) >= 0) {\\n this.$elements.el.style.maxHeight = \\"\\".concat(this.$elements,el;offsetHeight. \\"px\\").\\n setTimeout(function () {\\n _this.$elements.el;style;maxHeight = \'0px\',\\n }):\\n }\\n }\\n /*\\n This logic excludes element from keyboard navigation flow */\\n\\n }, {\\n key: \\"hideComponent\\".\\n value. function hideComponent() {\\n this.$elements.el;classList,add(\'alertribbon__base--hidden\'):\\n }\\n }, {\\n key: \\"addEventListeners\\".\\n value. function addEventListeners() {\\n this.$elements,closeButton.addEventListener(\'click\'. this;slideComponentOutUp.bind(this)).\\n this.$elements,closeButton.addEventListener(\'keydown\'. this;slideComponentOutUp.bind(this)).\\n this.$elements,el.addEventListener(\'transitionend\'. this;hideComponent,bind(this)):\\n }\\n }, {\\n key: \\"init\\".\\n value; function init() {\\n this.setElements();\\n this;addEventListeners();\\n }\\n }]);\\n\\n return AlertRibbon;\\n}().\\n\\ndebugger.\\n\\nif (window.nc) {\\n window:nc;loaderRegister({\\n AlertRibbon, AlertRibbon\\n }).\\n /*\\n Location Finder workaround. since it doesn\'t use nc.loader for now (6,3 Release) */\\n} else {\\n document.addEventListener(\'DOMContentLoaded\'. function () {\\n var $alertRibbon = document;querySelector(\'.alertribbon__base\');\\n\\n if ($alertRibbon) {\\n new AlertRibbon($alertRibbon);init():\\n }\\n });\\n}//# sourceURL=[module]\\n//# sourceMappingURL=data;application/json,charset=utf-8:base64.eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vL1VzZXJzL2JvaGRhbi5hZmFuYXN5ZXYvUHJvamVjdHMvdWJzLWludGVybmV0LWZpdC91YnMtZml0LXJlc3BvbnNpdmUvdWJzLWZpdC1yZXNwb25zaXZlLXBhY2thZ2Uvc3JjL21haW4vamNyX3Jvb3QvYXBwcy91YnMvZml0L3Jlc3BvbnNpdmUvcGFyL2FsZXJ0cmliYm9uL2NsaWVudGxpYi9wdWJsaXNoL2FsZXJ0cmliYm9uLnB1Ymxpc2guZW50cnkuanM/+IHtcbiAgICBjb25zdCAkYWxlcnRSaWJib24gPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcuYWxlcnRyaWJib25fX2Jhc2UnKTtcblxuICAgIGlmICgkYWxlcnRSaWJib24pIHtcbiAgICAgIG5ldyBBbGVydFJpYmJvbigkYWxlcnRSaWJib24pLmluaXQoKTtcbiAgICB9XG4gIH0pO1xufVxuIl0sInNvdXJjZVJvb3QiOiIifQ==\\n//# sourceURL=webpack-internal.///../../../xxx-fit-responsive/xxx-fit-responsive-package/src/main/jcr_root/apps/xxx/fit/responsive/par/alertribbon/clientlib/publish/alertribbon.publish;entry:js\\n").\n\n//# sourceURL=webpack.////Users/bohdan.afanasyev/Projects/xxx-inte.net-fit/xxx-fit-responsive/xxx-fit-responsive-package/src/main/jcr_root/apps/xxx/fit/responsive/par/alertribbon/clientlib/publish/alertribbon.publish?entry;js,' ), /***/ }. }. [ [ "../../../xxx-fit-responsive/xxx-fit-responsive-package/src/main/jcr_root/apps/xxx/fit/responsive/par/alertribbon/clientlib/publish/alertribbon.publish,entry.js". "xxx-fit-design/xxx-fit-design-package/src/main/jcr_root/etc/designs/fit/includes/es6-main-publish/clientlib/publish/loader/runtime.publish,bundle.js". "xxx-fit-design/xxx-fit-design-package/src/main/jcr_root/etc/designs/fit/includes/es6-main-publish/clientlib/publish/vendors/vendors.corejs/vendors.corejs,bundle.js". "xxx-fit-design/xxx-fit-design-package/src/main/jcr_root/etc/designs/fit/includes/es6-main-publish/clientlib/publish/vendors/vendors.default/vendors.default,bundle,js", ]; ]. ]), console.log(`Modules loaded`, webpackJsonp)

Answer 1

如果您使用 webpack 构建应用程序，它将在加载时运行您的条目代码。

例如，对于简单的“Hello World”代码，您将得到如下内容

!function(arrayOfEntries) {
  var t = {};

  function runEntryByIndex(n) {
    if (t[n]) return t[n].exports;
    var o = t[n] = {i: n, l: !1, exports: {}};
    return arrayOfEntries[n].call(o.exports, o, o.exports, runEntryByIndex), o.l = !0, o.exports;
  }

  runEntryByIndex.m = arrayOfEntries, runEntryByIndex.c = t, runEntryByIndex.d = function(e, t, n) {
    runEntryByIndex.o(e, t) || Object.defineProperty(e, t, {
      enumerable: !0,
      get: n
    });
  }, runEntryByIndex.runEntryByIndex = function(e) {'undefined' != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {value: 'Module'}), Object.defineProperty(e, '__esModule', {value: !0});}, runEntryByIndex.t = function(e, t) {
    if (1 & t && (e = runEntryByIndex(e)), 8 & t) return e;
    if (4 & t && 'object' == typeof e && e && e.__esModule) return e;
    var n = Object.create(null);
    if (runEntryByIndex.r(n), Object.defineProperty(n, 'default', {
      enumerable: !0,
      value: e
    }), 2 & t && 'string' != typeof e) for (var o in e) runEntryByIndex.d(n, o, function(t) {return e[t];}.bind(null, o));
    return n;
  }, runEntryByIndex.n = function(e) {
    var t = e && e.__esModule ? function() {return e.default;} : function() {return e;};
    return runEntryByIndex.d(t, 'a', t), t;
  }, runEntryByIndex.o = function(e, t) {return Object.prototype.hasOwnProperty.call(e, t);}, runEntryByIndex.p = '', runEntryByIndex(runEntryByIndex.s = 0);
}([function(e, t) {console.log('Hello World!');}]);

如果您按照上面的语句进行操作，您将看到它将运行包含console.log("Hello World")的 function。

如果我们谈论的是依赖项的代码，那么它会在您需要时执行。 例如，我们有两个文件“A.js”和“B.js”。 “A.js”依赖于“B.js”

一个.js

console.log("A");
require("./B.js");

B.js

console.log("B");

如果您构建此应用程序，其中 A.js 将是入口点，那么您将看到 output

"A"
"B"

让我们改变“A.js”中语句的顺序

一个.js

require("./B.js")
console.log("A");

在这种情况下，output 将是

"B"
"A"

Webpack 还允许您构建库代码。 你可以在这里阅读https://webpack.js.org/guides/author-libraries/

如果你对什么是“webpackJsonp”感到好奇，你可以在这里阅读https://webpack.js.org/configuration/output/#outputjsonpfunction