create custom loaders.

* https://survivejs.com/webpack/extending/loaders/

6 files changed, 42 insertions, 2 deletions

diff --git a/loaders/demo-loader.js b/loaders/demo-loader.js
index 5aad835..5860fee 100644
--- a/loaders/demo-loader.js
+++ b/loaders/demo-loader.js
@@ -1 +1,10 @@
-module.exports = input => input + input;
+const loaderUtils = require("loader-utils");
+
+module.exports = function(content) {
+  const { name } = loaderUtils.getOptions(this);
+  const url = loaderUtils.interpolateName(this, name, { content });
+  this.emitFile(url, content);
+
+  const path = `__webpack_public_path__ + ${JSON.stringify(url)};`;
+  return `export default ${path}`;
+};
diff --git a/loaders/pitch-loader.js b/loaders/pitch-loader.js
new file mode 100644
index 0000000..f61ccad
--- /dev/null
+++ b/loaders/pitch-loader.js
@@ -0,0 +1,15 @@
+const loaderUtils = require('loader-utils');
+
+module.exports = function(input) {
+  const { text } = loaderUtils.getOptions(this);
+  return input + text;
+};
+
+module.exports.pitch = function(remainingReq, precedingReq, input) {
+  console.log(`
+Remaining request: ${remainingReq}
+Preceding request: ${precedingReq}
+Input: ${JSON.stringify(input, null, 2)}
+`);
+  return "pitched";
+};
diff --git a/package.json b/package.json
index cb9389d..fd14529 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "karma-mocha": "^1.3.0",
     "karma-webpack": "^3.0.5",
     "loader-runner": "^2.3.1",
+    "loader-utils": "^1.1.0",
     "mini-css-extract-plugin": "^0.4.3",
     "mocha": "^5.2.0",
     "mocha-loader": "^2.0.0",
diff --git a/run-loader.js b/run-loader.js
index ad33562..165b9f1 100644
--- a/run-loader.js
+++ b/run-loader.js
@@ -5,7 +5,16 @@ const { runLoaders } = require("loader-runner");
 runLoaders(
   {
     resource: "./demo.txt",
-    loaders: [path.resolve(__dirname, "./loaders/demo-loader")],
+    loaders: [
+      {
+        loader: path.resolve(__dirname, "./loaders/demo-loader"),
+        options: { name: "demo.[ext]" },
+      },
+      path.resolve(__dirname, "./loaders/pitch-loader"),
+    ],
+    context: {
+      emitFile: () => {},
+    },
     readResource: fs.readFile.bind(fs),
   },
   (error, result) => (error ? console.error(error) : console.log(result))
diff --git a/src/component.js b/src/component.js
index 75dc72f..09b84eb 100644
--- a/src/component.js
+++ b/src/component.js
@@ -1,4 +1,5 @@
 import Worker from "worker-loader!./worker";
+import "!demo-loader?name=foo!./main.css";
 
 export default () => {
   const element = document.createElement("h1");
diff --git a/webpack.config.js b/webpack.config.js
index 813e5bf..d1f32df 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -13,6 +13,11 @@ const commonConfig = merge([
     output: {
       publicPath: "/",
     },
+    resolveLoader: {
+      alias: {
+        "demo-loader": path.resolve(__dirname, "loaders/demo-loader.js"),
+      },
+    },
   },
   parts.loadJavaScript({ include: PATHS.app }),
   parts.setFreeVariable("HELLO", "hello from config"),