feat: update internals to take advantage of webpack 3 module concatenation

BREAKING CHANGE: This is enabled by default and makes `*.vue` files export an
ES module by default, so require('foo.vue') will no longer work. Can be turned
off by using `esModule: false` in vue-loader options.

Author: yyx990803

.babelrc

@@ -1,3 +1,5 @@
 {
-  "presets": ["es2015"]
+  "presets": [
+    ["env", { "targets": { "node": 7 }, "modules": false }]
+  ]
 }

lib/loader.js

@@ -49,7 +49,9 @@ module.exports = function (content) {
 
   var loaderContext = this
   var query = loaderUtils.getOptions(this) || {}
-  var options = Object.assign({}, this.options.vue, this.vue, query)
+  var options = Object.assign({
+    esModule: !query.inject
+  }, this.options.vue, this.vue, query)
   // #824 avoid multiple webpack runs complaining about unknown option
   Object.defineProperty(this.options, '__vueOptions__', {
     value: options,

lib/template-compiler/index.js

@@ -45,21 +45,28 @@ module.exports = function (html) {
       `\n  Error compiling template:\n${pad(html)}\n` +
       compiled.errors.map(e => `  - ${e}`).join('\n') + '\n'
     )
-    code = 'module.exports={render:function(){},staticRenderFns:[]}'
+    code = vueOptions.esModule
+      ? `export function render () {}\nexport var staticRenderFns = []`
+      : 'module.exports={render:function(){},staticRenderFns:[]}'
   } else {
     var bubleOptions = options.buble
-    code = transpile('module.exports={' +
-      'render:' + toFunction(compiled.render) + ',' +
-      'staticRenderFns: [' + compiled.staticRenderFns.map(toFunction).join(',') + ']' +
-    '}', bubleOptions)
+    code = transpile(
+      'var render = ' + toFunction(compiled.render) + '\n' +
+      'var staticRenderFns = [' + compiled.staticRenderFns.map(toFunction).join(',') + ']',
+      bubleOptions
+    ) + '\n'
     // mark with stripped (this enables Vue to use correct runtime proxy detection)
     if (!isProduction && (
       !bubleOptions ||
       !bubleOptions.transforms ||
       bubleOptions.transforms.stripWith !== false
     )) {
-      code += `\nmodule.exports.render._withStripped = true`
+      code += `render._withStripped = true\n`
     }
+    var exports = `{ render: render, staticRenderFns: staticRenderFns }`
+    code += vueOptions.esModule
+      ? `export default ${exports}`
+      : `module.exports = ${exports}`
   }
   // hot-reload
   if (!isServer && !isProduction) {
@@ -76,7 +83,7 @@ module.exports = function (html) {
 }
 
 function toFunction (code) {
-  return 'function (){' + beautify(code, {
+  return 'function () {' + beautify(code, {
     indent_size: 2 // eslint-disable-line camelcase
   }) + '}'
 }

package.json

@@ -41,24 +41,24 @@
     "source-map": "^0.5.6",
     "vue-hot-reload-api": "^2.1.0",
     "vue-style-loader": "^3.0.0",
-    "vue-template-es2015-compiler": "^1.2.2"
+    "vue-template-es2015-compiler": "^1.5.3"
   },
   "peerDependencies": {
     "css-loader": "*",
     "vue-template-compiler": "^2.0.0"
   },
   "devDependencies": {
-    "babel-core": "^6.8.0",
-    "babel-loader": "^6.2.4",
-    "babel-preset-es2015": "^6.6.0",
+    "babel-core": "^6.25.0",
+    "babel-loader": "^7.0.0",
+    "babel-preset-env": "^1.5.2",
     "chai": "^3.0.0",
     "coffee-loader": "^0.7.2",
     "coffee-script": "^1.10.0",
     "css-loader": "^0.26.0",
     "eslint": "^3.14.1",
     "eslint-plugin-vue-libs": "^1.2.0",
     "expose-loader": "^0.7.1",
-    "extract-text-webpack-plugin": "^2.0.0-rc.0",
+    "extract-text-webpack-plugin": "^2.1.2",
     "file-loader": "^0.10.0",
     "inject-loader": "^2.0.0",
     "js-yaml": "^3.8.2",
@@ -80,6 +80,6 @@
     "vue": "^2.3.2",
     "vue-server-renderer": "^2.3.2",
     "vue-template-compiler": "^2.3.2",
-    "webpack": "^2.2.0"
+    "webpack": "^3.0.0"
   }
 }

test/fixtures/inject.vue

@@ -3,9 +3,9 @@
 </template>
 
 <script>
-import SomeService from './service'
+const SomeService = require('./service')
 
-export default {
+module.exports = {
   data () {
     return {
       msg: SomeService.msg

test/fixtures/ssr-style.js

@@ -1,5 +1,5 @@
 var Vue = require('vue')
-var App = require('./ssr-style.vue')
+var App = require('./ssr-style.vue').default
 
 module.exports = () => new Vue({
   render: h => h(App)

test/test.js

@@ -28,7 +28,10 @@ var globalConfig = {
         loader: loaderPath
       }
     ]
-  }
+  },
+  plugins: [
+    new webpack.optimize.ModuleConcatenationPlugin()
+  ]
 }
 
 function bundle (options, cb) {
@@ -321,7 +324,8 @@ describe('vue-loader', function () {
     }, (code, warnings) => {
       var css = mfs.readFileSync('/test.output.css').toString()
       css = normalizeNewline(css)
-      expect(css).to.contain('h1 {\n  color: #f00;\n}\n\nh2 {\n  color: green;\n}')
+      expect(css).to.contain('h1 {\n  color: #f00;\n}')
+      expect(css).to.contain('h2 {\n  color: green;\n}')
       done()
     })
   })
@@ -338,7 +342,8 @@ describe('vue-loader', function () {
     }, (code, warnings) => {
       var css = mfs.readFileSync('/test.output.css').toString()
       css = normalizeNewline(css)
-      expect(css).to.contain('h1 {\n  color: #f00;\n}\n\nh2 {\n  color: green;\n}')
+      expect(css).to.contain('h1 {\n  color: #f00;\n}')
+      expect(css).to.contain('h2 {\n  color: green;\n}')
       done()
     })
   })
@@ -356,7 +361,8 @@ describe('vue-loader', function () {
     }, (code, warnings) => {
       var css = mfs.readFileSync('/test.output.css').toString()
       css = normalizeNewline(css)
-      expect(css).to.contain('h1 {\n  color: #f00;\n}\n\nh2 {\n  color: green;\n}')
+      expect(css).to.contain('h1 {\n  color: #f00;\n}')
+      expect(css).to.contain('h2 {\n  color: green;\n}')
       done()
     })
   })
@@ -584,7 +590,7 @@ describe('vue-loader', function () {
         return m.exports;
       }
 
-      var output = requireFromString(code, './test.build.js')
+      var output = interopDefault(requireFromString(code, './test.build.js'))
       var mockInstance = {}
 
       output.beforeCreate.forEach(hook => hook.call(mockInstance))