Add support for src imports

Author: nicolo-ribaudo

README.md

@@ -42,3 +42,4 @@ You can either use this loader inline, or add it to your `webpack.config.js` fil
 01. [Basic](./examples/01-base/) - A basic example which shows how to use this loader.
 02. [vue-play](./examples/02-play) - Shows how to define an alias for the loader, so that you can `import "vue-play-loader!./component.vue"`.
 03. [Testing](./examples/03-play) - Sets the loader in `webpack.config.js`, without applying it to too much paths. (see [the previous warning](#warning-inline-loader))
+04. [Src import](./examples/04-src-import/) - This loader also works if the custom block specifies its value using the `src` attribute.

examples/04-src-import/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "vue-extract-loader.04-src-import",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "build": "webpack"
+  },
+  "devDependencies": {
+    "css-loader": "^0.28.2",
+    "vue-loader": "^12.1.0",
+    "vue-template-compiler": "^2.3.3",
+    "webpack": "^2.6.0"
+  },
+  "dependencies": {
+    "vue": "^2.3.3"
+  }
+}

examples/04-src-import/src/component.info.js

@@ -0,0 +1,6 @@
+export default {
+    name: "component",
+    author: "Nicolò Ribaudo",
+    description: "An Hello World component",
+    version: "0.1.0",
+};

examples/04-src-import/src/component.vue

@@ -0,0 +1,23 @@
+<template>
+    <p class="text">{{ message }}</p>
+</template>
+
+<script>
+
+export default {
+    data: () => ({
+        message: "Hello World!",
+    }),
+}
+
+</script>
+
+<style>
+
+.text {
+    color: blue;
+}
+
+</style>
+
+<info src="./component.info.js"></info>

examples/04-src-import/src/index.js

@@ -0,0 +1,4 @@
+// This only imports the <info> block of the component.vue file
+import info from "vue-extract-loader?block=info!./component.vue";
+
+console.log(info);

examples/04-src-import/webpack.config.js

@@ -0,0 +1,31 @@
+"use strict";
+
+const path = require("path");
+
+module.exports = {
+    entry: "./src/index.js",
+    output: {
+        filename: "./bundle.js",
+        path: path.resolve("dist"),
+    },
+
+    resolve: {
+        extensions: [ ".js", ".vue" ],
+    },
+
+    resolveLoader: {
+        alias: {
+            // This is only needed in order to alias "vue-extract-loader" to
+            // the root folder of this package.
+            // You shouldn't do this in your project.
+            "vue-extract-loader": require.resolve("../../"),
+        },
+    },
+
+    module: {
+        rules: [ {
+            test: /\.vue$/,
+            loader: "vue-loader",
+        } ],
+    },
+};

lib/loader.js

@@ -15,6 +15,10 @@ module.exports = function loader(source, map) {
 
     void map;
 
+    if (block.attrs.src) {
+        return `module.exports = require(${JSON.stringify(block.attrs.src)})`;
+    }
+
     return block.content;
 };