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"
},