I wanted to transfer my existing script to WebPack bundle.\u00a0 The application is a simple page that uses\u00a0 Vue.js.\u00a0 \u00a0Note that I only read Introduction part of Vue and started using it.\u00a0 At that time, I did not even know the concept of Vue component files .\u00a0 Thus my application was entirely in one JavaScript file.<\/p>\r\n\r\n\r\n\r\n
I rewrote it using typescript.\u00a0 \u00a0WebPack bundling was necessary to make it work.<\/p>\r\n\r\n\r\n\r\n
I had to decipher minor (but important) detail on NPM’s Vue\u00a0 module that should be used along with WebPack.\u00a0<\/p>\r\n\r\n\r\n\r\n
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.)<\/p>\r\n\r\n\r\n\r\n
Now this verbiage is coming from VueJs.org<\/a>\u00a0V2 guide This applies to ‘getting started example’ code where\u00a0 you use template directly on target html file, such as\u00a0<\/p>\r\n\r\n\r\n\r\n 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\u00a0 using vue-loader will precompile all the templates into render function (for those within component file)\u00a0 so the default settings wil be not an issue.\u00a0 \u00a0Issue is when I create a new instance\u00a0 of the view .\u00a0 I needed to add\u00a0 ‘alias’ clause to\u00a0 the ‘resolve’ section of module.exports.\u00a0 (for webpack v2 and above) Since I didn’t use .vue files for this project and put everything in a single html file, I did not\u00a0 need to use ‘vue-loader’ either. 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).\u00a0\u00a0<\/p>\r\n\r\n\r\n\r\n By the way, another way to make it work is not tell WebPack about Vue at all.<\/p>\r\n\r\n\r\n\r\n Yes, use the bundler but not bundle the module. It sounds strange but it works<\/p>\r\n","protected":false},"excerpt":{"rendered":" I wanted to transfer my existing script to WebPack bundle.\u00a0 The application is a simple page that uses\u00a0 Vue.js.\u00a0 \u00a0Note that I only read Introduction part of Vue and started using it.\u00a0 At that time, I did not even know the concept of Vue component files .\u00a0 Thus my application was entirely in one JavaScript file. I rewrote it using typescript.\u00a0 \u00a0WebPack bundling was necessary to make it work. I had to decipher minor (but important) detail on NPM’s Vue\u00a0 module that should be used along with WebPack.\u00a0 If I were to use a Vue package from node_modules\/ and bundle it with WebPack, then the default module that will be … Continue reading
https:\/\/vuejs.org\/v2\/guide\/installation.html#Terms<\/a><\/p>\r\n\r\n\r\n\r\n
” If you need to compile templates on the client (e.g. passing a string to the\u00a0template\u00a0option, or mounting to an element using its in-DOM HTML as the template), you will need the compiler and thus the full build:”<\/p>\r\n\r\n\r\n\r\n<div id=\"app\"> {{message}} <\/div><\/pre>\r\n\r\n\r\n\r\n
Again, according to the guide<\/p>\r\n\r\n\r\n\r\n\/\/ this requires the compiler\r\nnew Vue({\r\ntemplate: '{{ hi }}'\r\n})\r\n\r\n\/\/ this does not\r\nnew Vue({\r\nrender (h) {\r\nreturn h('div', this.hi)\r\n}\r\n})<\/pre>\r\n\r\n\r\n\r\n
If I use the first method but did not configure webpack to use full version of Vue module, resulting bundle file\u00a0 is missing template compiler and I will be staring at the blank page.\u00a0 In this situation,\u00a0 looking into\u00a0 source with F12 looks something like this<\/p>\r\n\r\n\r\n\r\n<body><!-- function(a,b,c,d) {.......} --><\/body><\/pre>\r\n\r\n\r\n\r\n
Then how do I configure Webpack\u00a0 so that it knows to bundle the full version of vue module instead of runtime-only module?\u00a0 It was spelled right in the guide above.<\/p>\r\n\r\n\r\n\r\nmodule.exports = {\r\n \/\/ ...\r\n resolve: \r\n {\r\n \/\/.....,\r\n alias: {'vue$': 'vue\/dist\/vue.esm.js'\u00a0}\r\n \/\/.......\r\n }\r\n<\/pre>\r\n\r\n\r\n\r\n
WebPack will then bundle full version of Vue module(vue.esm.js).\u00a0<\/p>\r\n\r\n\r\n\r\n
So this is a minimal requirement for Vue to work with WebPack.<\/p>\r\n\r\n\r\n\r\n\r\n
<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js<\/a>\"><\/script><\/pre>\r\n\r\n\r\n\r\n
\u00a0 \u00a0 2. Then tell Typescript\u00a0 that ‘Vue’ is a global object<\/p>\r\n\r\n\r\n\r\ndeclare let Vue:any<\/pre>\r\n\r\n\r\n\r\n