使用webpack犯过的一个错误

最新推荐文章于 2024-09-13 09:36:13 发布
最新推荐文章于 2024-09-13 09:36:13 发布
阅读量3.5k 收藏
点赞数 1
分类专栏： 前端 文章标签： webpack js node-js amd umd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mymy_blog/article/details/78147633
版权
webpack打包出的模块加载方式

webpack可以通过设置output.library、output.libraryExport和output.libraryTarget设置导出的模块的名字，导出模块的部分，和导出模块的形式（例如amd、commonjs、umd等形式）。这三个模块可以做如下选项。

output: {
  library: "MyLibrary",
  libraryExport: "default"，
  libraryTarget: "var"
}

配置可以解释为：webpack打包出来的文件是var MyLibrary=entry_return.default的形式。

下面这段代码是webpack的libraryTarget设置为umd时，webpack生成的以umd方式加载模块的代码片段。

manifest.js：

/******/ (function(modules) { // webpackBootstrap
/******/    // install a JSONP callback for chunk loading
/******/    var parentJsonpFunction = window["webpackJsonp"];
/******/    window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {
/******/        // add "moreModules" to the modules object,
/******/        // then flag all "chunkIds" as loaded and fire callback
/******/        var moduleId, chunkId, i = 0, resolves = [], result;
/******/        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(chunkIds, moreModules, executeModules);
/******/        while(resolves.length) {
/******/            resolves.shift()();
/******/        }
/******/        if(executeModules) {
/******/            for(i=0; i < executeModules.length; i++) {
/******/                result = __webpack_require__(__webpack_require__.s = executeModules[i]);
/******/            }
/******/        }
/******/        return result;
/******/    };
/******/
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // objects to store loaded and loading chunks
/******/    var installedChunks = {
/******/        8: 0
/******/    };
/******/
/******/    // 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;
/******/    }
/******/
/******/    // This file contains only the entry chunk.
/******/    // The chunk loading function for additional chunks
/******/    __webpack_require__.e = function requireEnsure(chunkId) {
/******/        var installedChunkData = installedChunks[chunkId];
/******/        if(installedChunkData === 0) {
/******/            return new Promise(function(resolve) { resolve(); });
/******/        }
/******/
/******/        // a Promise means "currently loading".
/******/        if(installedChunkData) {
/******/            return installedChunkData[2];
/******/        }
/******/
/******/        // setup Promise in chunk cache
/******/        var promise = new Promise(function(resolve, reject) {
/******/            installedChunkData = installedChunks[chunkId] = [resolve, reject];
/******/        });
/******/        installedChunkData[2] = promise;
/******/
/******/        // start chunk loading
/******/        var head = document.getElementsByTagName('head')[0];
/******/        var script = document.createElement('script');
/******/        script.type = 'text/javascript';
/******/        script.charset = 'utf-8';
/******/        script.async = true;
/******/        script.timeout = 120000;
/******/
/******/        if (__webpack_require__.nc) {
/******/            script.setAttribute("nonce", __webpack_require__.nc);
/******/        }
/******/        script.src = __webpack_require__.p + "" + chunkId + ".js";
/******/        var timeout = setTimeout(onScriptComplete, 120000);
/******/        script.onerror = script.onload = onScriptComplete;
/******/        function onScriptComplete() {
/******/            // avoid mem leaks in IE.
/******/            script.onerror = script.onload = null;
/******/            clearTimeout(timeout);
/******/            var chunk = installedChunks[chunkId];
/******/            if(chunk !== 0) {
/******/                if(chunk) {
/******/                    chunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));
/******/                }
/******/                installedChunks[chunkId] = undefined;
/******/            }
/******/        };
/******/        head.appendChild(script);
/******/
/******/        return promise;
/******/    };
/******/
/******/    // 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
/******/            });
/******/        }
/******/    };
/******/
/******/    // 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 = "";
/******/
/******/    // on error function for async loading
/******/    __webpack_require__.oe = function(err) { console.error(err); throw err; };
/******/ })
/************************************************************************/
/******/ ([]);
使用webpack打包易犯的一个错误

假设存在一个已被webpack打包的文件A.js，当在使用webpack打包了一个新的模块B.js。当A.js、B.js模块被同时引进一个页面时，可能导致加载重复，从而使A.js或者B.js中的代码不会正常执行。

具体原因分析

下面是manifest.js文件中webpack加载模块的函数

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;
/******/    }

webpack打包时分配给模块一个id，根据上面的webpack_require函数可以了解到，webpack在后续加载模块时是根据模块的id去加载对应模块的。所以webpack确保在一次打包中，模块的id是唯一的。下面是webpack打包生成文件中截取的一段代码，由下面这段代码可知webpack打包文件中id和模块的对应形式。

/***/ 101:
/***/ (function(module, exports, __webpack_require__) {

module.exports = { "default": __webpack_require__(102), __esModule: true };

/***/ }),

/***/ 102:
/***/ (function(module, exports, __webpack_require__) {

__webpack_require__(103);
module.exports = __webpack_require__(1).Object.setPrototypeOf;

/***/ }),

/***/ 103:
/***/ (function(module, exports, __webpack_require__) {

// 19.1.3.19 Object.setPrototypeOf(O, proto)
var $export = __webpack_require__(11);
$export($export.S, 'Object', {setPrototypeOf: __webpack_require__(104).set});

/***/ }),

当两个文件A.js、B.js不是一次打时生成的，却被引入进同一个页面，那么可能id就会不唯一，加载时就会冲突。例如A.js中有一个模块的id是200，A.js被加载时，200对应的模块会被执行，而B.js中也有一个模块对应的id是200，那么B.js被加载时，B.js中200对应的模块就不会执行，从而发生错误。

走过路过见过记得
关注
专栏目录
webpack-dev-middleware单页面路由问题
weixin_39168678的博客
06-30 321
我们使用webpack配置的开发服务器其实本质是对express的封装，而单页面应用一般只有开始的时候请求页面资源之后路由的变化并不需要再向服务器请求页面资源只需要客户端内部匹配即可，那么所有的单页面服务器都需要在页面进行附带路由请求的时候进行拦截处理。 webpack-dev-server由于已经完成了封装 所以只需要进行配置即可 devServer: { ... historyApiFallback: true , ... }, webpack-dev-m
搭建一个webpack打包项目，需要注意的事项
xiamocsdn的博客
07-23 311
以下是自己初学webpack的时候会犯的错误，记录下来以备以后翻阅。 加载lodash依赖的时候，需要安装在生产依赖而不是开发依赖中： dependencies：使用当前包所需要的依赖 devDependencies：一些模块在开发时需要依赖。配置这个属性可以提示包的后续开发者安装依赖包。 $ sudo cnpm install lodash -S 加载html-webpack-...
使用webpack搭建一个vue demo
01-08
前言：我们在开发vue过程中使用vue-cli脚手架工具能够十分快速的构建项目， 但是vue官方却十分不推荐初学者直接使用脚手架，为了更好理解vue-cli工作原理，故我们使用webpack构建一个vue demo，能够编写基本的vue代码 一.目录结构 目录结构如下： 初始化为npm项目后，创建图示文件，文件夹 mkdir webpack-vue npm init -y 二.项目依赖 首先安装webpack开发依赖 npm i webpack webpack-cli webpack-dev-server -D 安装babel相关依赖，编译es6代码 npm i babel-core b
vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:×ERROR[object Object] at handleError (webpack-internal://
最新发布
m0_73136840的博客
09-13 442
在vue.config.js中添加如下配置，然后。
ERROR [object Object] at handleError (webpack-internal:///./node_modules/webpack-dev-server/clie
qq_33240556的博客
06-04 1517
这看起来像是与webpack-dev-server相关的错误。通常情况下，这会发生在您的JavaScript代码或配置出现问题时。：如果您正在使用webpack-dev-server，请检查其配置选项。：如果您无法找出问题所在，尝试在线搜索特定的错误消息。：检查您浏览器的开发者控制台是否有其他错误消息。有时，由于依赖项过时或不兼容，可能会导致错误。如果您提供有关您的项目设置和具体错误消息的更多细节，我可以提供更有针对性的建议！：查看错误消息中提到的行附近的代码。确保它们已正确设置，并且配置中没有错误。
Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack）
u013798595的博客
02-29 928
【代码】Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack）
vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack
前端小99的博客
12-13 3934
当你页面出现警告信息的时候 会出现警告 然后页面以为是错误 所以红色报错覆盖页面。带着疑问我去查了webpcak中文文档最终发现原因所在。当出现编译错误或警告时，在浏览器中显示全屏覆盖。在vue.config.js中添加如下配置，
学习使用webpack+vue搭建项目
Bonjourjw的博客
12-18 2947
最近，一直把JS基本语法知识重新巩固学习的同时，也一直在跟着上篇文章中提到的名为“守候”的博主发表的文章进行学习，今天也将自己在通过他的文章使用webpack+vue搭建项目环境的过程中遇到的值得记录的点，都一并写在这里
第17章 课程总结【很有必要带你避免面试犯低级错误】.rar
12-24
"第17章 课程总结【很有必要带你避免面试犯低级错误】"这个标题暗示了一个专门针对前端开发者面试准备的课程或者资料包，旨在帮助面试者识别并避免在面试过程中可能犯的一些常见错误。这一章节很可能涵盖了前端开发...
solidity-以太坊区块链Truffle-webpack开发入门 (三) 合约的认识以及程序错误调试
u012360598的专栏
12-24 561
Tutorials 1 起步-调试程序 本教程版本需truffle的版本为 v4.0+ 1.新建一个项目 打开终端，命名为1in $ mkdir tutorials1 $ cd tutorials1 $ truffle init 2.在contracts目录中新建文件 Store.sol 内容如下： pragma solidity ^0.4.17; contract S...
vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019
PGguoqi的博客
04-19 8947
未完
axios出现错误Uncaught runtime errors:handleError@webpack-internal:///./node_modules/webpack-dev-server
qq_51389038的博客
09-27 1007
在vue.config.js中devServer设置client: {overlay: false}就可以了。
vue-cli3 js 项目引入ts混用步骤与 爆错[webpack-cli] Error: The loaded module contains errors at
adamxuu的博客
04-23 431
启动项目后闪退并且有如上一大串爆错。
axios请求错误处理Uncaught runtime errors:handleError@webpack-internal:///./node_modules/webpack-dev-server
热门推荐
weixin_46525113的博客
05-25 2万+
axios请求错误封装处理，全屏弹出Uncaught runtime errors:handleError@webpack-internal:///./node_modules/webpack-dev-server控制台也会全部展示
Webpack 踩坑笔记: webpack-dev-server 启动命令失败(Error: Cannot find module ‘webpack-cli/bin/config-yargs‘)
超悠閒的博客
06-16 1万+
Webpack 踩坑笔记: webpack-dev-server 启动命令失败(Error: Cannot find module ‘webpack-cli/bin/config-yargs’) 文章目录Webpack 踩坑笔记: webpack-dev-server 启动命令失败(Error: Cannot find module 'webpack-cli/bin/config-yargs')前言正文项目背景问题描述解决方案方案 1：使用新命令 webpack serve(推荐)方案 2：降低 webpa
webpack运行常见异常
lovearforever的博客
06-29 2965
一、配置热更新时 遇见 context.compiler.hooks.invalid.tap('WebpackDevMiddleware', invalid);处理方法：1、卸载webpack-dev-middleware ，执行npm uninstall webpack-dev-middleware，使用dev-server自带的webpack-dev-middleware2、重新install...
webpack-使用webpack-dev-middleware
xie__jin__cheng的博客
04-12 1041
1.环境创建和命令 //基本环境 npm init -y npm install --save-dev webpack npm install --save-dev webpack-cli npm install --save lodash //本课环境 npm install --save-dev express webpack-dev-middleware //运行的命令 npm run...
如何使用webpack搭建一个项目
03-24
使用webpack搭建一个项目的步骤如下： 1. 安装Node.js和npm； 2. 在项目根目录下运行npm init命令，创建一个package.json文件； 3. 安装webpack和webpack-cli：npm install webpack webpack-cli --save-dev； 4. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值