Webpack4不会将主模块执行到我的页面条目

Question

当尝试从webpack 3迁移到4时,一些入口点生成的代码实际上不执行页面的"主"模块.

以下示例显示了将使用两个脚本标记加载的生成代码的关键部分.一个用于vendors.js和一个用于附加条目las_dlg_projectstatus.js.

应该执行的实际代码是在D:\MyDev\ljs_app\periscope_webpack4\build\src\modules\las_dlg_projectstatus\index.js加载具有id的模块时加载,86但是在加载页面时都不会加载/执行.

任何帮助非常感谢!

/******/ (function(modules) { // webpackBootstrap
/******/    // install a JSONP callback for chunk loading
/******/    function webpackJsonpCallback(data) {
/******/        var chunkIds = data[0];
/******/        var moreModules = data[1];
/******/        var executeModules = data[2];
/******/        // add "moreModules" to the modules object,
/******/        // then flag all "chunkIds" as loaded and fire callback
/******/        var moduleId, chunkId, i = 0, resolves = [];
/******/        for(;i < chunkIds.length; i++) {
/******/            chunkId = chunkIds[i];
/******/            if(installedChunks[chunkId]) {
/******/                resolves.push(installedChunks[chunkId][0]);
/******/            }
/******/            installedChunks[chunkId] = 0;
/******/        }
/******/        for(moduleId in moreModules) {
/******/            if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
/******/                modules[moduleId] = moreModules[moduleId];
/******/            }
/******/        }
/******/        if(parentJsonpFunction) parentJsonpFunction(data);
/******/        while(resolves.length) {
/******/            resolves.shift()();
/******/        }
/******/
/******/        // add entry modules from loaded chunk to deferred list
/******/        deferredModules.push.apply(deferredModules, executeModules || []);
/******/
/******/        // run deferred modules when all chunks ready
/******/        return checkDeferredModules();
/******/    };
/******/    function checkDeferredModules() {
/******/        var result;
/******/        for(var i = 0; i < deferredModules.length; i++) {
/******/            var deferredModule = deferredModules[i];
/******/            var fulfilled = true;
/******/            for(var j = 1; j < deferredModule.length; j++) {
/******/                var depId = deferredModule[j];
/******/                if(installedChunks[depId] !== 0) fulfilled = false;
/******/            }
/******/            if(fulfilled) {
/******/                deferredModules.splice(i--, 1);
/******/                result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
/******/            }
/******/        }
/******/        return result;
/******/    }
/******/
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // object to store loaded and loading chunks
/******/    // undefined = chunk not loaded, null = chunk preloaded/prefetched
/******/    // Promise = chunk loading, 0 = chunk loaded
/******/    var installedChunks = {
/******/        "las_dlg_projectstatus": 0
/******/    };
/******/
/******/    // script path function
/******/    function jsonpScriptSrc(chunkId) {
/******/        return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + ".js"
/******/    }
/******/
/******/    var deferredModules = [];
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId]) {
/******/            return installedModules[moduleId].exports;
/******/        }
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.l = true;
/******/
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
/******/
/******/
/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;
/******/
/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;
/******/
/******/    // define getter function for harmony exports
/******/    __webpack_require__.d = function(exports, name, getter) {
/******/        if(!__webpack_require__.o(exports, name)) {
/******/            Object.defineProperty(exports, name, {
/******/                configurable: false,
/******/                enumerable: true,
/******/                get: getter
/******/            });
/******/        }
/******/    };
/******/
/******/    // define __esModule on exports
/******/    __webpack_require__.r = function(exports) {
/******/        Object.defineProperty(exports, '__esModule', { value: true });
/******/    };
/******/
/******/    // getDefaultExport function for compatibility with non-harmony modules
/******/    __webpack_require__.n = function(module) {
/******/        var getter = module && module.__esModule ?
/******/            function getDefault() { return module['default']; } :
/******/            function getModuleExports() { return module; };
/******/        __webpack_require__.d(getter, 'a', getter);
/******/        return getter;
/******/    };
/******/
/******/    // Object.prototype.hasOwnProperty.call
/******/    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";
/******/
/******/    var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
/******/    var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
/******/    jsonpArray.push = webpackJsonpCallback;
/******/    jsonpArray = jsonpArray.slice();
/******/    for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
/******/    var parentJsonpFunction = oldJsonpFunction;
/******/
/******/
/******/    // add entry module to deferred list
/******/    deferredModules.push([86,"vendors",3]);
/******/    // run deferred modules when ready
/******/    return checkDeferredModules();
/******/ })
/************************************************************************/
/******/ ({

/***/ "./src/framework/completeness/completeness.js":
/*!****************************************************!*\
  !*** ./src/framework/completeness/completeness.js ***!
  \****************************************************/
/*! exports provided: completnessPercentbar, completnessPercentbarEvent */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "completnessPercentbar", function() { return completnessPercentbar; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "completnessPercentbarEvent", function() { return completnessPercentbarEvent; });
/* harmony import */ var Source_ODS_ods__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! Source_ODS/ods */ "./src/ods/ods.js");
/* harmony import */ var Source_ODS_convert__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! Source_ODS/convert */ "./src/ods/convert.js");
/* harmony import */ var Source_ODS_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! Source_ODS/ui */ "./src/ods/ui.js");
/* harmony import */ var Source_Framework_backend_jsonData__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! Source_Framework/backend/jsonData */ "./src/framework/backend/jsonData.js");
/* harmony import */ var Source_ODS_ajax__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! Source_ODS/ajax */ "./src/ods/ajax.js");

/* >>>code has been removed to same some space<<< */

/***/ }),

/* >>>most modules have been removed to same some space<<< */

/***/ 86:
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** multi core-js/shim regenerator-runtime/runtime <<<...>>> ./src/modules/las_dlg_projectstatus/index.js ./src/modules/las_dlg_projectstatus/index.styl ./src/modules/las_dlg_projectstatus/widget.js ./src/modules/las_dlg_projectstatus/widget.styl ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(/*! core-js/shim */"./node_modules/core-js/shim.js");
__webpack_require__(/*! regenerator-runtime/runtime */"./node_modules/regenerator-runtime/runtime.js");
/* >>>code has been removed to same some space<<< */
__webpack_require__(/*! D:\MyDev\ljs_app\periscope_webpack4\build\src\modules\las_dlg_projectstatus\index.js */"./src/modules/las_dlg_projectstatus/index.js");
__webpack_require__(/*! D:\MyDev\ljs_app\periscope_webpack4\build\src\modules\las_dlg_projectstatus\index.styl */"./src/modules/las_dlg_projectstatus/index.styl");
__webpack_require__(/*! D:\MyDev\ljs_app\periscope_webpack4\build\src\modules\las_dlg_projectstatus\widget.js */"./src/modules/las_dlg_projectstatus/widget.js");
module.exports = __webpack_require__(/*! D:\MyDev\ljs_app\periscope_webpack4\build\src\modules\las_dlg_projectstatus\widget.styl */"./src/modules/las_dlg_projectstatus/widget.styl");


/***/ })

/******/ });
//# sourceMappingURL=las_dlg_projectstatus.js.map

Answer 1

尝试添加一个script标记,将您加载vendors.js到您的html页面.

我自己也面临这个问题.我认为webpack假设您加载了所有需要的块,并且只有在发生之后才启动.看到这些线？

/******/    // add entry module to deferred list
/******/    deferredModules.push([86,"vendors",3]);
/******/    // run deferred modules when ready
/******/    return checkDeferredModules();

看起来像是说像

嘿,这个非常大块已经准备就绪了,但也应该有一个名为'供应商'的块.我会检查它是否已经在这里(checkDeferredModules),如果是 - 我会开始,否则我会通过.

就我而言,我的页面运行需要3个块.在我将所有3个块包含在页面html中之前,它没有做任何事情.虽然我认为它会异步加载它们.但是我猜,要使异步块工作,需要做一些比简单更聪明的事情import from.查看https://webpack.js.org/api/module-methods/#import-

希望能帮助到你