Webpack4 не выполняет основной модуль для записи на мою страницу
При попытке перехода с webpack 3 на 4 некоторые точки входа генерируют код, который фактически не выполняет «основной» модуль страницы.
В следующем примере показаны ключевые части сгенерированного кода, который будет загружен с использованием двух тегов скрипта. Один для vendors.js и один для прилагаемой записи las_dlg_projectstatus.js.
Фактический код, который должен быть выполнен, находится в D:\MyDev\ljs_app\periscope_webpack4\build\src\modules\las_dlg_projectstatus\index.js и должен быть загружен при загрузке модуля с идентификатором 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
Ответы 3
Попробуйте добавить тег script, который загружает ваш vendors.js на вашу html-страницу.
Столкнулся с этой проблемой сам. Я думаю, что webpack предполагает, что вы загружаете все необходимые фрагменты, и запускается только после того, как это произошло. Видите эти строки?
/******/ // add entry module to deferred list
/******/ deferredModules.push([86,"vendors",3]);
/******/ // run deferred modules when ready
/******/ return checkDeferredModules();
Похоже, там написано что-то вроде
Hey, this very chunk is ready, but there should also be a chunk named 'vendors' somewhere. I'll check if it's already here (
checkDeferredModules), and if it is - I'll start, otherwise I'll pass.
В моем случае для запуска моей страницы требовалось 3 фрагмента. Он ничего не делал, пока я не включил все 3 фрагмента в html страницы. Хотя думал, что загрузит их асинхронно. Но я думаю, что для работы асинхронных фрагментов нужно сделать что-то более умное, чем простой import from. Проверить https://webpack.js.org/api/module-methods/#import-
Надеюсь, поможет
Это также решило проблему для меня, но разве webpack не должен автоматически включать все зависимости? Спасибо за вашу помощь!
@ Люк, я думаю, этого не должно быть. Причина в том, что включение тегов script в HTML-страницы выходит за рамки ядра webpack. Это делается отдельными плагинами, например HtmlWebpackPlugin. Таким образом, разработчик приложения должен загрузить все необходимые фрагменты для точки входа.
Спасибо за это. Теперь я понимаю это немного лучше. В итоге я использовал HtmlWebpackPlugin и заставил его генерировать HTML-файлы для определенных страниц в моем приложении и настроил определенные фрагменты, которые будут включены.
Что делать, если у меня есть приложение с несколькими записями, в котором уже есть страница .html для использования, я не хочу создавать файл .html для HtmlWebpackPlugin для анализа во время сборки. Интересно, какие у меня здесь варианты?
Мне нужно было обратить внимание на deferredModules в выходном пакете - мне нужно было изменить "all" на "async" для определенного модуля. Ваше здоровье
Я хотел добавить, показывая типичную конфигурацию с использованием HtmlWebpackPlugin для потомков.
Как сказал @ Павел Гатилов, вы, вероятно, захотите добавить теги сценария в свой основной файл HTML, используя HtmlWebpackPlugin. Вот пример производственной конфигурации, которая расширяет общий файл конфигурации:
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = merge(common, {
mode: 'production',
optimization: {
splitChunks: {
chunks: 'all',
},
},
plugins: [
new HtmlWebpackPlugin(),
],
});
Webpack создаст index.html в вашем output.path и будет включать необходимые теги сценария, например:
...
<!-- Webpack actually minifies the HTML but I have formatted it here -->
<body>
<script src = "/js/vendors~main.min.js"></script>
<script src = "/js/client.min.js"></script>
</body>
...
Если вы используете React или вам просто нужно изменить сгенерированный HTML, вы можете использовать шаблоны для генерации вывода с вашим пользовательским HTML:
template.html:
<html>
<head>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<!-- For my React App -->
<div id = "app></div>
</body>
</html>
webpack.prod.js:
module.exports = merge(common, {
mode: 'production',
optimization: {
splitChunks: {
chunks: 'all',
},
},
plugins: [
new HtmlWebpackPlugin({
title: 'My title',
template: 'template.html',
}),
],
});
Обратите внимание, что плагин автоматически injects теги скрипта в нижней части HTML вашего шаблона.
Я не могу писать комментарии, поэтому позвольте мне сделать это отдельным ответом. У меня была такая же проблема не с самим webpack, а с webpack-dev-server. Скрипт завис на dev-сервере, ни в одной другой сборке webpack этой проблемы не было.
Скрипт был добавлен как отдельная точка входа, также было настроено раннее разделение вендора.
Причина проблемы с зависанием скрипта была описана в первом ответе.
Итак, решение для меня заключалось в настройке игнорирования группы кеша поставщика для определенного фрагмента:
...
optimization: {
splitChunks: {
minChunks: 1,
minSize: 30000,
cacheGroups: {
vendor: {
name: 'vendor',
chunks: (chunk) => chunk.name !== 'organizations',//this line
minChunks: 1,
test: /[\/]node_modules[\/]/,
reuseExistingChunk: false
}
}
}
}
...
Надеюсь, кому-то это пригодится.
Если на одной странице загружается несколько пакетов веб-пакетов, используйте
outputs.jsonpFunction, чтобы указать другое имя загрузчика для каждого пакета.