p-m-j · dependabot · Jul 9, 2022 · Jul 9, 2022
diff --git a/README.md b/README.md
@@ -31,32 +31,41 @@ const injectScripts = require("webpack-dev-server-inject-scripts");
 ...
 
 devServer: {
-  index: "",
   port: 8080,
   hot: true,
   historyApiFallback: true,
+  devMiddleware: {
+    index: "",
+  },
   proxy: {
     "/": {
-      target: "http://localhost:1234", // Your backend application here
-      changeOrigin: true // play nice with upstream https
+      target: "http://localhost:65535", // Your backend application here
+      changeOrigin: true, // play nice with upstream https
     }
   },
-  before: function(app, server, compiler) {
-    app.use(injectScripts(compiler));
-  }
-}
+  setupMiddlewares: (middlewares, devServer) => {
+    if (!devServer) {
+      throw new Error('webpack-dev-server is not defined');
+    }
 
-```
+    // Optional options
+    const options = { 
+      ignoredPaths: [/\/ignored, /\/wp-admin/]
+    };
 
-The middleware function can take an options argument for additional configuration
+    middlewares.unshift({
+      name: 'webpack-dev-server-inject-scripts',
+      middleware: injectScripts(devServer, options)
+    });
+
+    return middlewares;
+  },
+}
 
-```js
-const options = {
-  ignoredPaths: [/\/umbraco/, /\/wp-admin/]
-};
-app.use(injectScripts(compiler, options));
 ```
 
+## Usage
+
 - run backend application
 - run webpack-dev-server
 

diff --git a/example/package.json b/example/package.json
@@ -4,14 +4,18 @@
   "description": "demo the point of this thing",
   "license": "MIT",
   "scripts": {
-    "start": "webpack serve"
+    "start": "concurrently \"http-server -p 65535 upstream\" \"webpack serve\" -n upstream,webpack"
   },
-  "dependencies": {
-    "css-loader": "^5.1.1",
-    "style-loader": "^2.0.0",
-    "webpack": "^5.24.4",
-    "webpack-cli": "^4.5.0",
-    "webpack-dev-server": "^3.11.2",
-    "webpack-dev-server-inject-scripts": "file:.."
+  "devDependencies": {
+    "css-loader": "^6.7.1",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.3",
+    "webpack-dev-server-inject-scripts": "file:..",
+    "modify-response-middleware": "^1.1.0",
+    "@types/webpack": "^5.28.0",
+    "concurrently": "^7.2.2",
+    "http-server": "^14.1.1"
   }
 }
diff --git a/example/upstream/demo.css b/example/upstream/demo.css
@@ -0,0 +1,3 @@
+body{
+    background: blue;
+}
diff --git a/example/upstream/ignored/index.html b/example/upstream/ignored/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Demo</title>
+    <link rel="stylesheet" href="/demo.css" />
+</head>
+<body>
+    <h1>The upstream site > ignored path</h1>
+</body>
+</html>
diff --git a/example/upstream/index.html b/example/upstream/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Demo</title>
+    <link rel="stylesheet" href="/demo.css" />
+</head>
+<body>
+    <h1>The upstream site</h1>
+</body>
+</html>
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -1,6 +1,7 @@
-const path = require("path");
+// @ts-check
 const injectScripts = require("webpack-dev-server-inject-scripts");
 
+/** @type {import('webpack').Configuration} */
 module.exports = {
   mode: 'development',
   entry: {
@@ -16,17 +17,28 @@ module.exports = {
     ],
   },
   devServer: {
-    index: "",
     port: 8080,
     hot: true,
+    devMiddleware: {
+      index: "",
+    },
     proxy: {
       "/": {
-        target: "https://www.ft.com/", // Your backend application here
-        changeOrigin: true // play nice with upstream https
+        target: "http://localhost:65535", // Your backend application here
+        changeOrigin: true, // play nice with upstream https
+      }
+    },
+    setupMiddlewares: (middlewares, devServer) => {
+      if (!devServer) {
+        throw new Error('webpack-dev-server is not defined');
       }
+
+      middlewares.unshift({
+        name: 'webpack-dev-server-inject-scripts',
+        middleware: injectScripts(devServer, {ignoredPaths: [/\/ignored/]})
+      });
+
+      return middlewares;
     },
-    before: function (app, server, compiler) {
-      app.use(injectScripts(compiler));
-    }
   }
-};
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "webpack-dev-server-inject-scripts",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Injects scripts into html body for proxied requests",
   "main": "src/index.js",
   "author": "Paul Johnson (https://github.com/p-m-j)",
@@ -21,7 +21,7 @@
     "url": "https://github.com/p-m-j/webpack-dev-server-inject-scripts.git"
   },
   "dependencies": {
-    "tamper": "^1.1.0"
+    "modify-response-middleware": "^1.1.0"
   },
   "devDependencies": {
     "chai": "^4.2.0",

diff --git a/src/WebpackDevServerInjectScriptsPlugin.js b/src/WebpackDevServerInjectScriptsPlugin.js
@@ -1,48 +1,24 @@
-const pluginName = 'WebpackDevServerInjectScriptsPlugin';
-
 const defaultOptions = {
   ignoredPaths: []
 };
 
-// TODO: Add winston and some logging to aid debugging.
-
 class WebpackDevServerInjectScriptsPlugin {
-  constructor(compiler, options) {
-    this.files = {};
+  constructor(devServer, options) {
     this.options = Object.assign({}, defaultOptions, options);
-    this.publicPath = compiler.options.output.publicPath.endsWith('/')
-      ? compiler.options.output.publicPath
-      : compiler.options.output.publicPath + '/';
-
-    if (this.publicPath.startsWith('auto/')) {
-      console.warn(`(${pluginName}) - auto public path may not be handled correctly`)
-      // TODO: HtmlWebpackPlugin handle this, work it out
-      this.publicPath = this.publicPath.replace('auto/', '/');
-    }
-
-    compiler.hooks.emit.tap(pluginName, this.onWebpackEmit.bind(this));
-  }
 
-  onWebpackEmit(compilation) {
-    // TODO: HtmlWebpackPlugin file list better
-    // run compiler.options.entry through some function to establish output filenames.
+    const entryNames = Object.keys(devServer.compiler.options.entry);
+    const output = devServer.compiler.options.output;
+    const filename = devServer.compiler.options.output.filename;
+    const publicPath = output.publicPath == 'auto' ?  '/' : output.publicPath;
 
-    const excludeHot = /\.hot-update\.js$/;
-    const onlyJs = /\.js$/;
-    compilation.chunks.forEach(chunk => {
-      chunk.files.forEach(filename => {
-        if (excludeHot.test(filename)) return;
-        if (!onlyJs.test(filename)) return;
-        this.files[`${this.publicPath}${filename}`] = 1;
-      });
-    });
+    this.scripts = entryNames
+      .map(x => `${publicPath}${filename.replace(/\[name\]/g, x)}`)
+      .filter(x => x.endsWith('.js'))
+      .map(x => `<script src="${x}"></script>`)
+      .join('')
   }
 
   shouldTransform(request, response) {
-    if (response.statusCode != 200) {
-      return false;
-    }
-
     if (!/text\/html/.test(response.get('Content-Type'))) {
       return false;
     }
@@ -51,18 +27,16 @@ class WebpackDevServerInjectScriptsPlugin {
     const url = request.originalUrl;
     for (const i in this.options.ignoredPaths) {
       const ignored = this.options.ignoredPaths[i];
-      if (url.match(ignored)) return false;
+      if (url.match(ignored)) {
+        return false;
+      }
     }
 
     return true;
   }
 
   transform(body) {
-    const scripts = Object.keys(this.files)
-      .map(x => `<script src="${x}"></script>`)
-      .join('');
-
-    return body.replace('</body>', `${scripts}</body>`)
+    return body.replace('</body>', `${this.scripts}</body>`)
   }
 }