webpack 打包后的bundle分析
webpack打包后的bundle文件：app.bundle.js里面其实就是个立即执行函数，类似如下结构：
(function (modules){
console.log(modules['app'])
})
({
'app': function(){
return 20
},
'test': function(){
return 40
}
})新建demo目录如下：
webpack.config.js:
module.exports = {
mode: 'development',
entry: {
app: './app.js'
},
output: {
filename: '[name].bundle.js'
}
}app.js:
import add from './add.js'
import multi from './multi.js'
function component() {
const element = document.createElement('div')
element.innerHTML = '20 + 30 =' + add(20, 30) + '; ' + '20 * 30 = ' + multi(20, 30)
return element
}
document.body.appendChild(component())
add.js:
/**
* Created by lizuncong on 2018/11/21.
*/
const add = function (a, b){
return a + b
}
export default addmulti.js:
/**
* Created by lizuncong on 2018/11/21.
*/
const multi = function (a, b) {
return a * b
}
export default multi运行webpack，打包后的app.bundle.js文件如下：
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // 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, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // 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 = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./app.js");
/******/ })
/************************************************************************/
/******/ ({
/***/ "./add.js":
/*!****************!*\
!*** ./add.js ***!
\****************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/**\n * Created by lizuncong on 2018/11/21.\n */\nconst add = function (a, b){\n return a + b\n}\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (add);\n\n//# sourceURL=webpack:///./add.js?");
/***/ }),
/***/ "./app.js":
/*!****************!*\
!*** ./app.js ***!
\****************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _add_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./add.js */ \"./add.js\");\n/* harmony import */ var _multi_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./multi.js */ \"./multi.js\");\n\n\n\n\nfunction component() {\n const element = document.createElement('div')\n element.innerHTML = '20 + 30 =' + Object(_add_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(20, 30) + '; ' + '20 * 30 = ' + Object(_multi_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(20, 30)\n return element\n}\n\ndocument.body.appendChild(component())\n\n\n\n//# sourceURL=webpack:///./app.js?");
/***/ }),
/***/ "./multi.js":
/*!******************!*\
!*** ./multi.js ***!
\******************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/**\n * Created by lizuncong on 2018/11/21.\n */\nconst multi = function (a, b) {\n return a * b\n}\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (multi);\n\n//# sourceURL=webpack:///./multi.js?");
/***/ })
/******/ });可看出app.bundle.js里面就是个立即执行函数，函数体就是webpack生成的运行时函数，参数就是个 键值对 对象。
如果给entry传数组，对比打包后的bundl。比如修改webpack.config.js：
module.exports = {
mode: 'development',
entry: {
app: ['./app.js', './multi.js']
},
output: {
filename: '[name].bundle.js'
}
}打包后的app.bundle.js：
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // 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, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // 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 = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ({
/***/ "./add.js":
/*!****************!*\
!*** ./add.js ***!
\****************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/**\n * Created by lizuncong on 2018/11/21.\n */\nconst add = function (a, b){\n return a + b\n}\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (add);\n\n//# sourceURL=webpack:///./add.js?");
/***/ }),
/***/ "./app.js":
/*!****************!*\
!*** ./app.js ***!
\****************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _add_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./add.js */ \"./add.js\");\n/* harmony import */ var _multi_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./multi.js */ \"./multi.js\");\n\n\n\n\nfunction component() {\n const element = document.createElement('div')\n element.innerHTML = '20 + 30 =' + Object(_add_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(20, 30) + '; ' + '20 * 30 = ' + Object(_multi_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(20, 30)\n return element\n}\n\ndocument.body.appendChild(component())\n\n\n\n//# sourceURL=webpack:///./app.js?");
/***/ }),
/***/ "./multi.js":
/*!******************!*\
!*** ./multi.js ***!
\******************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/**\n * Created by lizuncong on 2018/11/21.\n */\nconst multi = function (a, b) {\n return a * b\n}\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (multi);\n\n//# sourceURL=webpack:///./multi.js?");
/***/ }),
/***/ 0:
/*!*********************************!*\
!*** multi ./app.js ./multi.js ***!
\*********************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
eval("__webpack_require__(/*! ./app.js */\"./app.js\");\nmodule.exports = __webpack_require__(/*! ./multi.js */\"./multi.js\");\n\n\n//# sourceURL=webpack:///multi_./app.js_./multi.js?");
/***/ })
/******/ });可知在键为0的属性中，最后module.exports输出的是entry中位于数组最后的一个入口。