wip

Author: yyx990803

example/webpack.config.js

@@ -4,6 +4,7 @@ const VueLoaderPlugin = require('../dist/plugin')
 module.exports = {
   mode: 'development',
   entry: path.resolve(__dirname, './main.js'),
+  devtool: 'cheap-module-eval-source-map',
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'bundle.js',

src/hotReload.ts

@@ -1,14 +1,15 @@
 // __VUE_HMR_RUNTIME__ is injected to global scope by @vue/runtime-core
 
-export function genHotReloadCode(id: string, templateRequest?: string): string {
+export function genHotReloadCode(
+  id: string,
+  templateRequest: string | undefined
+): string {
   return `
 /* hot reload */
 if (module.hot) {
   const api = __VUE_HMR_RUNTIME__
   module.hot.accept()
-  if (!api.isRecorded('${id}')) {
-    api.createRecord('${id}', script)
-  } else {
+  if (!api.createRecord('${id}', script)) {
     api.reload('${id}', script)
   }
   ${templateRequest ? genTemplateHotReloadCode(id, templateRequest) : ''}

src/index.ts

@@ -115,8 +115,8 @@ const loader: webpack.loader.Loader = function(source) {
     const scopedQuery = hasScoped ? `&scoped=true` : ``
     const attrsQuery = attrsToQuery(descriptor.template.attrs)
     const query = `?vue&type=template${idQuery}${scopedQuery}${attrsQuery}${inheritQuery}`
-    const request = (templateRequest = stringifyRequest(src + query))
-    templateImport = `import render from ${request}`
+    templateRequest = stringifyRequest(src + query)
+    templateImport = `import render from ${templateRequest}`
   }
 
   // script
@@ -125,9 +125,10 @@ const loader: webpack.loader.Loader = function(source) {
     const src = descriptor.script.src || resourcePath
     const attrsQuery = attrsToQuery(descriptor.script.attrs, 'js')
     const query = `?vue&type=script${attrsQuery}${inheritQuery}`
-    const request = stringifyRequest(src + query)
+    const scriptRequest = stringifyRequest(src + query)
     scriptImport =
-      `import script from ${request}\n` + `export * from ${request}` // support named exports
+      `import script from ${scriptRequest}\n` +
+      `export * from ${scriptRequest}` // support named exports
   }
 
   // styles