I wanted to transfer my existing script to WebPack bundle. The application is a simple page that uses Vue.js. Note that I only read Introduction part of Vue and started using it. At that time, I did not even know the concept of Vue component files . Thus my application was entirely in one JavaScript file.
I rewrote it using typescript. WebPack bundling was necessary to make it work.
I had to decipher minor (but important) detail on NPM’s Vue module that should be used along with WebPack.
If I were to use a Vue package from node_modules/ and bundle it with WebPack, then the default module that will be used is Runtime-only ES module build (vue.runtime.esm.js.)
Now this verbiage is coming from VueJs.org V2 guide
https://vuejs.org/v2/guide/installation.html#Terms
” If you need to compile templates on the client (e.g. passing a string to the template option, or mounting to an element using its in-DOM HTML as the template), you will need the compiler and thus the full build:”
This applies to ‘getting started example’ code where you use template directly on target html file, such as
<div id="app"> {{message}} </div>
According to Vue documentation, runtime only module is 30% lighter and when I write my code in such a way that it utilize component file (*.vue), then using vue-loader will precompile all the templates into render function (for those within component file) so the default settings wil be not an issue. Issue is when I create a new instance of the view .
Again, according to the guide
// this requires the compiler
new Vue({
template: '{{ hi }}'
})
// this does not
new Vue({
render (h) {
return h('div', this.hi)
}
})
If I use the first method but did not configure webpack to use full version of Vue module, resulting bundle file is missing template compiler and I will be staring at the blank page. In this situation, looking into source with F12 looks something like this
<body><!-- function(a,b,c,d) {.......} --></body>
Then how do I configure Webpack so that it knows to bundle the full version of vue module instead of runtime-only module? It was spelled right in the guide above.
module.exports = {
// ...
resolve:
{
//.....,
alias: {'vue$': 'vue/dist/vue.esm.js' }
//.......
}
I needed to add ‘alias’ clause to the ‘resolve’ section of module.exports. (for webpack v2 and above)
WebPack will then bundle full version of Vue module(vue.esm.js).
Since I didn’t use .vue files for this project and put everything in a single html file, I did not need to use ‘vue-loader’ either.
So this is a minimal requirement for Vue to work with WebPack.
Vue.js has a very detailed documentation which is good. All I needed was to read it through and understand the meaning of it (lol).
By the way, another way to make it work is not tell WebPack about Vue at all.
- add script tag in your HTML writeup pointing to Vue CDN
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2. Then tell Typescript that ‘Vue’ is a global object
declare let Vue:any
Yes, use the bundler but not bundle the module. It sounds strange but it works
