问题
When trying to migrate from webpack 3 to 4 some of the entry points generate code that actually does not execute the "main" module of the page.
The following example shows the key parts of the generated code that will loaded using two script tags. One for vendors.js and one for the attached entry las_dlg_projectstatus.js.
The actual code that should be executed is in D:\MyDev\ljs_app\periscope_webpack4\build\src\modules\las_dlg_projectstatus\index.js and should be loaded when loading the module with the id 86 but neither will be loaded/executed when loading the page.
Any help is most appreciated!
/******/ (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
回答1:
Try adding a script tag that loads your vendors.js to your html page.
Faced this problem myself. I think webpack assumes that you load all needed chunks, and starts only after that has happened. See these lines?
/******/ // add entry module to deferred list
/******/ deferredModules.push([86,"vendors",3]);
/******/ // run deferred modules when ready
/******/ return checkDeferredModules();
Looks like it says something like
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.
In my case, I had 3 chunks needed for my page to run. It did not do anything until I included all 3 chunks into the page html. Although I thought it would load them asynchronously. But I guess, for async chunks to work, one needs to do something more clever than simple import from. Check out https://webpack.js.org/api/module-methods/#import-
Hope it helps
回答2:
I wanted to add on showing the typical configuration using HtmlWebpackPlugin for posterity.
As what @Pavel Gatilov has said, you probably want to add the script tags into your main HTML file using the HtmlWebpackPlugin. Here is a sample production configuration which extends a common configuration file:
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 will produce a index.html in your output.path and that will include the required script tags like so:
...
<!-- 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>
...
If you're using React or you just need to change the generated HTML, you can use templates to generate the output with your custom 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',
}),
],
});
Note that the plugin automatically injects the script tags at the bottom of your template HTML.
回答3:
I can't write comment, so let me do it via separated answer. I had the same issue not with webpack itself, but with webpack-dev-server. Script was frozen under dev-server, noone other webpack builds included this problem.
Script has been added as separate entry point, early vendor's splitting were also configured.
The cause of issue with frozen script stuff was described at the first answer.
So the solution for me was setting ignore vendor cache group for particular chunk:
...
optimization: {
splitChunks: {
minChunks: 1,
minSize: 30000,
cacheGroups: {
vendor: {
name: 'vendor',
chunks: (chunk) => chunk.name !== 'organizations',//this line
minChunks: 1,
test: /[\\/]node_modules[\\/]/,
reuseExistingChunk: false
}
}
}
}
...
Hope, someone will find it helpful.
来源：https://stackoverflow.com/questions/50129112/webpack4-does-not-execute-main-module-to-my-page-entry