webpack打包的出口文件bundle.js解读

webpack打包的出口文件bundle.js解读

webpack中文网地址

打包生成的文件：

 (function(modules) { //webpackBootstrap
 //模块缓存
 	var installedModules = {};

 	            // The require function |require函数 
				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_modules__）
 	__webpack_require__.m = modules;

 	// expose the module cache 公开模块缓存 
 	__webpack_require__.c = installedModules;

 	// define getter function for harmony exports 定义用于和谐导出的getter函数
 	__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 在导出中定义__esModule 
 	__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
	 //模式＆1：值是模块ID，需要它
     //模式＆2：将值的所有属性合并到ns中
     //模式＆4：当已经有ns对象时返回值
     //模式＆8 | 1：表现为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| getDefaultExport函数，用于与非和谐模块兼容
 	__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 = "./src/index.js");
 })({
//key->模块的路径 value:函数 ，将对象作为参数传给module
 "./src/a.js":
 (function(module, exports) {

eval("module.exports = \"haha\";\n\n//# sourceURL=webpack:///./src/a.js?");

 }),
 
 "./src/index.js":
 (function(module, exports, __webpack_require__) {

eval("\r\nlet str = __webpack_require__(/*! ./a.js */ \"./src/a.js\");\r\nconsole.log(str);\n\n//# sourceURL=webpack:///./src/index.js?");

})

 });

webpack.config.js文件：

let path= require('path');
// console.log(path.resolve(__dirname,'dist'));

module.exports = {

    mode:'development', //模式 默认有两钟 production development（不压缩）
    entry:'./src/index.js', //入口文件
    output:{
        filename:'bundle.js', //出口文件
        path: path.resolve(__dirname,'dist'), //必须事绝对路劲，path.resolve可以将相对路径该为绝对路径
    }
}

千里之行始于足下

@欢迎指正交流，谢谢点赞，关注，收藏。