Use play example to show loader aliasing

Author: nicolo-ribaudo

examples/02-play/package.json

@@ -9,8 +9,6 @@
     "build:play": "vbuild --config play.config.js"
   },
   "devDependencies": {
-    "babel-loader": "^7.0.0",
-    "babel-preset-es2015": "^6.24.1",
     "vbuild": "^7.1.0",
     "vue-loader": "^12.1.0",
     "vue-play": "^3.2.1",

examples/02-play/play.config.js

@@ -33,19 +33,10 @@ module.exports = {
             // the root folder of this package.
             // You shouldn't do this in your project.
             "vue-extract-loader": require.resolve("../../"),
-        };
 
-        config.module.rules.push({
-            test: /.vue$/,
-            issuer: path.join(__dirname, "play/index.js"),
-            use: [ {
-                loader: "babel-loader",
-                options: { presets: [ "es2015" ] }
-            }, {
-                loader: "vue-extract-loader",
-                options: { block: "play" },
-            } ],
-        });
+            // You can alias the loader to avoid repeating the configuration query
+            "vue-play-loader": "vue-extract-loader?block=play",
+        };
 
         return config;
     },

examples/02-play/play/index.js

@@ -1 +1 @@
-import "../src/colorful-button.vue";
+import "vue-play-loader!../src/colorful-button.vue";