02webpack打包出來的文件解析

webpack打包出來的文件解析

打包後源碼分析

打包後源碼分析
其實是:

(function(modules){})({key1:value1,key2:value2......})

(function(modules) { // webpackBootstrap
	// The module cache 先定義模塊緩存
	// "./src/index.js"   :{}
	var installedModules = {};
	// The require function 配置了，實現了require方法
	function __webpack_require__(moduleId) {// ./src/index.js
		// 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模塊)
	__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
	__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值
"./src/a.js":
/*!******************!*\
  !*** ./src/a.js ***!
  \******************/
/*! no static exports found 沒有找到靜態導出 */
// value
(function(module, exports) {

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

}),

// key值
"./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/*! no static exports found 沒有找到靜態導出 */
// value
(function(module, exports, __webpack_require__) {

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

})

});

手動指定webpack文件：
npx webppack --config webpack.config.js

在package.json中配置一些腳本，經過腳本執行一些命令

"scripts": {
    "build": "webpack --config webpack.config.js"
  },