浅谈webpack编译vue项目生成的代码探索

2020-06-16 06:06:51易采站长站整理

el: '#app',
template: '<App/>',
components: {
App: __WEBPACK_IMPORTED_MODULE_1__App_vue__["a" /* default */] }
});

/***/ })

2号模块

即是 Vue 源码本身,从114行一直到了10818行,一共是10705行代码,啧啧啧

webpack 有所配置,所以导出的 Vue 实际上是 vue/dist/vue.esm.js 的完整编译版本。


/* 2 */
/***/ (function (module, __webpack_exports__, __webpack_require__) {

"use strict";
/*!
* Vue.js v2.5.9
* (c) 2014-2017 Evan You
* Released under the MIT License.
*/

// 作用域指向__webpack_exports__,并把__webpack_require__(0)作为global,实际上就是window
// __webpack_require__(3).setImmediate)作为setsetImmediate参数传入函数
(function (global, setImmediate) {

// 省略近1w行的代码,关于vue原本本身的解读以后再做......

// 最终 export 出来一个叫 Vue$3的对象
/* harmony default export */
__webpack_exports__["a"] = (Vue$3);

/* WEBPACK VAR INJECTION */
}.call(__webpack_exports__, __webpack_require__(0), __webpack_require__(3).setImmediate))

}),

3,4,5号模块

都和 node_modules/setimmediate 有关,由于 vue 的 DOM 异步更新机制使用到了它,所以被引入。

这里也不做详解,只给出结构。


/* 3 */
/***/
(function (module, exports, __webpack_require__) {

// 省略代码...

// setimmediate attaches itself to the global object
__webpack_require__(4);
exports.setImmediate = setImmediate;
exports.clearImmediate = clearImmediate;

/***/
}),

/* 4 */
/***/
(function (module, exports, __webpack_require__) {

/* WEBPACK VAR INJECTION */
(function (global, process) {
// 省略代码...
}.call(exports, __webpack_require__(0), __webpack_require__(5)))

/***/
}),

/* 5 */
/***/
(function (module, exports) {

// shim for using process in browser
var process = module.exports = {};

// 省略代码...

process.cwd = function () {
return '/'
};
process.chdir = function (dir) {
throw new Error('process.chdir is not supported');
};
process.umask = function () {
return 0;
};
/***/
}),

6号模块

和 App.vue 的解析有关,把 App.vue 中的 template 和 script 编译为一个 vue components,并把 style 标签内的样式插入到DOM中。


/* 6 */
/***/
(function (module, __webpack_exports__, __webpack_require__) {

"use strict";

// 返回具体 App.vue 中 的script 中的代码
var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_App_vue__ = __webpack_require__(13);