使用webpack犯过的一个错误

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对应的模块就不会执行，从而发生错误。