vue-loaderの動作を見てみよう
下記のようなコンポーネントをwebpackでビルドして、どんなbundleが生成されるか観察する。
code: App.vue
<template>
<div id="app">
<h1>Hello, World!</h1>
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
msg: "Hi there!"
};
}
};
</script>
<style>
color: green;
}
</style>
code:webpack.config.js
module.exports = {
entry: "./src/main.js",
output: {
path: __dirname,
filename: "./js/bundle.js"
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader"
}
]
}
};
変換後
bundle.jsは248kbあり、巨大で探しづらいため、検索で引っ掛けた部分のみ掲載。
code: bundle-template.js
/***/ }),
/* 13 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return render; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return staticRenderFns; });
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c("div", { attrs: { id: "app" } }, [
_vm._v(" "),
])
}
var staticRenderFns = []
render._withStripped = true
if (false) {
module.hot.accept()
if (module.hot.data) {
require("vue-hot-reload-api") .rerender("data-v-04c2046b", { render: render, staticRenderFns: staticRenderFns })
}
}
code: bundle-script.js
/***/ }),
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
//
//
//
//
//
//
//
/* harmony default export */ __webpack_exports__"a" = ({ name: "app",
data: function data() {
return {
msg: "Hi there!"
};
}
});
scriptは、普通のJavaScriptモジュールと同様にexportされている。ただのJSオブジェクト。
code:bundle-css.js
/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(10)(false);
// imports
// module
// exports
styleは文字列化されてexportされている。
code: bundle-css-extra.js
/***/ }),
/* 8 */
/***/ (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__(9);
if(typeof content === 'string') content = module.i, content, '';
if(content.locals) module.exports = content.locals;
// add the styles to the DOM
var add = __webpack_require__(11).default
var update = add("0b8f9ca6", content, false, {});
// Hot Module Replacement
if(false) {
// When the styles change, update the <style> tags
if(!content.locals) {
module.hot.accept("!!../node_modules/css-loader/index.js!../node_modules/vue-loader/lib/style-compiler/index.js?{\"optionsId\":\"0\",\"vue\":true,\"scoped\":false,\"sourceMap\":false}!../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./App.vue", function() {
var newContent = require("!!../node_modules/css-loader/index.js!../node_modules/vue-loader/lib/style-compiler/index.js?{\"optionsId\":\"0\",\"vue\":true,\"scoped\":false,\"sourceMap\":false}!../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./App.vue");
if(typeof newContent === 'string') newContent = module.id, newContent, '';
update(newContent);
});
}
// When the module is disposed, remove the <style> tags
module.hot.dispose(function() { update(); });
}
ここがexportされたCSSを読み込んでいる部分なのではないかと思う。
またCSSを追加する機構には先がありそうだが、とりあえずここまで。