use Webpack 2 and update lazy-loading example

Author: yyx990803

.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets": ["es2015-loose", "flow-vue"]
+  "presets": ["es2015-loose", "flow-vue"],
+  "plugins": ["syntax-dynamic-import"]
 }

examples/lazy-loading/app.js

@@ -17,19 +17,25 @@ const Home = { template: '<div>home</div>' }
 // or
 // - () => Promise<Component>
 
-// For single component, we can use the AMD shorthand
-// require(['dep'], dep => { ... })
-const Foo = resolve => require(['./Foo.vue'], resolve)
+// For single component, we can simply use dynamic import which returns
+// a Promise.
+const Foo = () => import('./Foo.vue')
 
-// If using Webpack 2, you can also do:
-// const Foo = () => System.import('./Foo.vue')
+// The import() syntax is a replacement for the deprecated System.import() and
+// is specified at https://github.com/tc39/proposal-dynamic-import. Webpack 2
+// supports using it to indicate a code-splitting point.
+// Note: if using Babel you will need `babel-plugin-syntax-dynamic-import`.
+
+// If using Webpack 1, you will have to use AMD syntax or require.ensure:
+// const Foo = resolve => require(['./Foo.vue'], resolve)
 
 // If you want to group a number of components that belong to the same
 // nested route in the same async chunk, you will need to use
 // require.ensure. The 3rd argument is the chunk name they belong to -
 // modules that belong to the same chunk should use the same chunk name.
-const Bar = r => require.ensure([], () => r(require('./Bar.vue')), '/bar')
-const Baz = r => require.ensure([], () => r(require('./Baz.vue')), '/bar')
+// For more details see https://webpack.js.org/guides/code-splitting-require/
+const Bar = resolve => require.ensure([], () => resolve(require('./Bar.vue')), '/bar')
+const Baz = resolve => require.ensure([], () => resolve(require('./Baz.vue')), '/bar')
 
 const router = new VueRouter({
   mode: 'history',

examples/webpack.config.js

@@ -24,9 +24,9 @@ module.exports = {
   },
 
   module: {
-    loaders: [
-      { test: /\.js$/, exclude: /node_modules/, loader: 'babel' },
-      { test: /\.vue$/, loader: 'vue' }
+    rules: [
+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
+      { test: /\.vue$/, loader: 'vue-loader' }
     ]
   },
 
@@ -44,7 +44,10 @@ module.exports = {
   },
 
   plugins: [
-    new webpack.optimize.CommonsChunkPlugin('shared.js'),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'shared',
+      filename: 'shared.js'
+    }),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
     })

package.json

@@ -37,6 +37,7 @@
     "babel-core": "^6.11.4",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^6.2.4",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-es2015-loose": "^8.0.0",
     "babel-preset-flow-vue": "^1.0.0",
@@ -71,7 +72,7 @@
     "vue": "^2.1.0",
     "vue-loader": "^10.0.0",
     "vue-template-compiler": "^2.1.0",
-    "webpack": "^1.13.1",
-    "webpack-dev-middleware": "^1.6.1"
+    "webpack": "^2.2.0",
+    "webpack-dev-middleware": "^1.9.0"
   }
 }

src/history/base.js

@@ -285,23 +285,15 @@ function resolveAsyncComponents (matched: Array<RouteRecord>): Array<?Function>
     // resolved.
     if (typeof def === 'function' && !def.options) {
       return (to, from, next) => {
-        // in Webpack 2, require.ensure now also returns a Promise
-        // so the resolve/reject functions may get called an extra time
-        let called = false
-
-        const resolve = resolvedDef => {
-          if (called) return
-          called = true
+        const resolve = once(resolvedDef => {
           match.components[key] = resolvedDef
           next()
-        }
+        })
 
-        const reject = reason => {
-          if (called) return
-          called = true
+        const reject = once(reason => {
           warn(false, `Failed to resolve async component ${key}: ${reason}`)
           next(false)
-        }
+        })
 
         const res = def(resolve, reject)
         if (res && typeof res.then === 'function') {
@@ -328,3 +320,16 @@ function flatMapComponents (
 function flatten (arr) {
   return Array.prototype.concat.apply([], arr)
 }
+
+// in Webpack 2, require.ensure now also returns a Promise
+// so the resolve/reject functions may get called an extra time
+// if the user uses an arrow function shorthand that happens to
+// return that Promise.
+function once (fn) {
+  let called = false
+  return function () {
+    if (called) return
+    called = true
+    return fn.apply(this, arguments)
+  }
+}