Observational study how vue-loader components act on a single file:
Create a single-file components:
app.vue:
webpack configuration:
Packing operation, the generated code can be seen vue-loader for the first file .vue this process is:
// Here's import statement uses webpack loader inline again app.vue file for processing,
js // use of app.vue vue-loader processes generated and get render staticRenderFns
import { render, staticRenderFns } from "./app.vue?vue&type=template&id=5ef48958&"
// to app.vue use vue-loader for processing to get the script
import script from "./app.vue?vue&type=script&lang=js&"
export * from "./app.vue?vue&type=script&lang=js&"
/* normalize component */
import normalizer from "!../node_modules/vue-loader/lib/runtime/componentNormalizer.js"
// initialized using a standard normalizer vue components
var component = normalizer(
script,
render,
staticRenderFns,
false,
null,
null,
null
)
/ * Hot reload * / // heat load related content
if (module.hot) {
var api = require("C:\\Users\\huhao\\Desktop\\vue-loader-learn\\node_modules\\vue-hot-reload-api\\dist\\index.js")
api.install(require('vue'))
if (api.compatible) {
module.hot.accept()
if (!api.isRecorded('5ef48958')) {
api.createRecord('5ef48958', component.options)
} else {
api.reload('5ef48958', component.options)
}
module.hot.accept("./app.vue?vue&type=template&id=5ef48958&", function () {
api.rerender ( '5ef48958', {
render: render,
staticRenderFns: staticRenderFns
})
})
}
}
// component of options of __file attribute tag file name
component.options.__file = "src/app.vue"
// component of exports is exposed to the
export default component.exports
Following analysis of this file:
Create a new file js fill in the above code, call webpack package for this file to be printed in place to mark the generated main.js implanted into the page runs, view the console for analysis:
Get treated again with loader render, staticRenderFns, script:
import { render, staticRenderFns } from "./app.vue?vue&type=template&id=5ef48958&"
// to app.vue use vue-loader for processing to get the script
import script from "./app.vue?vue&type=script&lang=js&"
export * from "./app.vue?vue&type=script&lang=js&"
The content here is the result of template script block content and block content itself again called vue-loader
template blocks using vue-template-compiler
Standardization generate a component:
/* normalize component */
import normalizer from "!../node_modules/vue-loader/lib/runtime/componentNormalizer.js"
// initialized using a standard normalizer vue components
var component = normalizer(
script,
render,
staticRenderFns,
false,
null,
null,
null
)
Look normalizeComponent function:
Printed component of the structure:
The last part of the code portion of the exports went to the export options as a
Note that, if the component is used in script portion Vue.extend so generated is a function of exports
Official documentation of narrative:
* What is staticRenderFunctions
* Vue-loader for references to vue-template-compiler, namely: when the analysis segment block template
...
Conclusion: vue-loader is a webpack loader, a single document processing component .vue suffix. .Vue first converted to the corresponding content file, and the respective contents of each template, script, css and other regional call the loader, the final form of an object returns a js component data.