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

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

// 把App.vue 的 template 解析为一堆 vue render 函数。
var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_66ce2159_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_App_vue__ = __webpack_require__(14);

// 注入vue文件里写入的css函数
function injectStyle(ssrContext) {
// 由此可知7号模块是编译并插入vue中的css到DOM上的
__webpack_require__(7)
}
// 12号模块用于输出components渲染函数
var normalizeComponent = __webpack_require__(12)
/* script */

/* template */

/* template functional */
var __vue_template_functional__ = false
/* styles */
var __vue_styles__ = injectStyle
/* scopeId */
var __vue_scopeId__ = null
/* moduleIdentifier (server only) */
var __vue_module_identifier__ = null

// 编译模块,混杂template和script。
var Component = normalizeComponent(
__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_App_vue__["a" /* default */ ],
__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_66ce2159_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_App_vue__["a" /* default */ ],
__vue_template_functional__,
__vue_styles__,
__vue_scopeId__,
__vue_module_identifier__
)

/* harmony default export */
__webpack_exports__["a"] = (Component.exports);

/***/
}),

7、8、9、10、11

都和样式有关,简言之就是7号模块加载8号模块获取css代码作为参数,并作为参数传入10号模块进行插入

太长也只大意上列出结构

7号模块由 style-loader 带入,把所有的css插入到 style 标签里
8号模块加载具体的css代码,
9号模块由css-loader代入,用于做css的sourceMap
10号模块返回具体插入动作函数,供7号模块调用
11号模块把所有的样式组成的数组转为字符串,给10号模块做插入。


/* 7 */

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

// style-loader: Adds some css to the DOM by adding a <style> tag

// load the styles
var content = __webpack_require__(8);
if (typeof content === 'string') content = [
[module.i, content, ''] ];
if (content.locals) module.exports = content.locals;
// add the styles to the DOM
var update = __webpack_require__(10)("15459d21", content, true);

/***/
}),
/* 8 */
/***/
(function (module, exports, __webpack_require__) {

// css-loader 用于做css的sourceMap
exports = module.exports = __webpack_require__(9)(undefined);
// imports

// module
// 这就是 App.vue 文件中 style 里的的 css