Support webpack 3 module concatenation by using imports instead

of `require`s

Author: fnlctrl

lib/loader.js

@@ -107,6 +107,10 @@ module.exports = function (content) {
     ')'
   }
 
+  function getImport (type, part, index, scoped) {
+    return 'import __vue_' + type + '__ from ' + getRequireString(type, part, index, scoped)
+  }
+
   function getRequireString (type, part, index, scoped) {
     return loaderUtils.stringifyRequest(loaderContext,
       // disable all configuration loaders
@@ -126,6 +130,10 @@ module.exports = function (content) {
     ')'
   }
 
+  function getImportForImport (type, impt, scoped) {
+    return 'import __vue_' + type + '__ from ' + getRequireForImportString(type, impt, scoped)
+  }
+
   function getRequireForImportString (type, impt, scoped) {
     return loaderUtils.stringifyRequest(loaderContext,
       '!!' +
@@ -420,52 +428,74 @@ module.exports = function (content) {
   //   scopeId,
   //   moduleIdentifier (server only)
   // )
-  output += 'var Component = require(' +
-    loaderUtils.stringifyRequest(loaderContext, '!' + componentNormalizerPath) +
-  ')(\n'
+  if (options.esModule) {
+    output += 'import normalizeComponent from ' +
+      loaderUtils.stringifyRequest(loaderContext, '!' + componentNormalizerPath) +
+    '\n'
+  } else {
+    output += 'var normalizeComponent = require(' +
+      loaderUtils.stringifyRequest(loaderContext, '!' + componentNormalizerPath) +
+    ')\n'
+  }
 
   // <script>
-  output += '  /* script */\n  '
+  output += '/* script */\n'
   var script = parts.script
   if (script) {
-    output += script.src
-      ? getRequireForImport('script', script)
-      : getRequire('script', script)
+    if (options.esModule) {
+      output += script.src
+        ? getImportForImport('script', script)
+        : getImport('script', script) + '\n'
+    } else {
+      output += 'var __vue_script__ = ' + (script.src
+        ? getRequireForImport('script', script)
+        : getRequire('script', script)) + '\n'
+    }
     // inject loader interop
     if (query.inject) {
-      output += '(injections)'
+      output += '__vue_script__ = __vue_script__(injections)\n'
     }
   } else {
-    output += 'null'
+    output += 'var __vue_script__ = null\n'
   }
-  output += ',\n'
 
   // <template>
-  output += '  /* template */\n  '
+  output += '/* template */\n'
   var template = parts.template
   if (template) {
-    output += template.src
-      ? getRequireForImport('template', template)
-      : getRequire('template', template)
+    if (options.esModule) {
+      output += (template.src
+        ? getImportForImport('template', template)
+        : getImport('template', template)) + '\n'
+    } else {
+      output += 'var __vue_template__ = ' + (template.src
+        ? getRequireForImport('template', template)
+        : getRequire('template', template)) + '\n'
+    }
   } else {
-    output += 'null'
+    output += 'var __vue_template__ = null\n'
   }
-  output += ',\n'
 
   // style
-  output += '  /* styles */\n  '
-  output += (parts.styles.length ? 'injectStyle' : 'null') + ',\n'
+  output += '/* styles */\n'
+  output += 'var __vue_styles__ = ' + (parts.styles.length ? 'injectStyle' : 'null') + '\n'
 
   // scopeId
-  output += '  /* scopeId */\n  '
-  output += (hasScoped ? JSON.stringify(moduleId) : 'null') + ',\n'
+  output += '/* scopeId */\n'
+  output += 'var __vue_scopeId__ = ' + (hasScoped ? JSON.stringify(moduleId) : 'null') + '\n'
 
   // moduleIdentifier (server only)
-  output += '  /* moduleIdentifier (server only) */\n  '
-  output += (isServer ? JSON.stringify(hash(this.request)) : 'null') + '\n'
+  output += '/* moduleIdentifier (server only) */\n'
+  output += 'var __vue_module_identifier__ = ' + (isServer ? JSON.stringify(hash(this.request)) : 'null') + '\n'
 
   // close normalizeComponent call
-  output += ')\n'
+  output += 'var Component = normalizeComponent(\n' +
+    '  __vue_script__,\n' +
+    '  __vue_template__,\n' +
+    '  __vue_styles__,\n' +
+    '  __vue_scopeId__,\n' +
+    '  __vue_module_identifier__\n' +
+    ')\n'
 
   // development-only code
   if (!isProduction) {