Initial commit

Author: p-m-j

.editorconfig

@@ -0,0 +1,13 @@
+root = true
+
+[*]
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+charset = utf-8
+
+[*.js]
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

.gitattributes

@@ -0,0 +1 @@
+* text=auto

.gitignore

@@ -0,0 +1 @@
+node_modules/

.npmignore

@@ -0,0 +1,5 @@
+.editorconfig
+.gitignore
+.gitattributes
+.prettierrc
+example/

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": true,
+  "singleQuote": true
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Paul Johnson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,73 @@
+# webpack-dev-server-inject-scripts
+
+webpack-dev-server is amazing when you're working on a SPA but it can be a pain to setup
+when you want to use it with a traditional backend application that serves markup
+instead of json, for example, a CMS that isn't headless.
+
+- Which files do I need to reference in my master layout / template?
+- What happens if I add a new entry or rename one of the output files in webpack config?
+
+When running a production build things are easy, you can point HtmlWebpackPlugin at your layout
+files and it will happily inject the necessary script and link elements and output a file you can deploy.
+
+This project aims to provide similar functionality in development by injecting references to the code built by webpack into the markup served by your backend application when viewing through the http-proxy-middleware.
+
+Please note that the API is likely to change without any concern for backwards compatability
+until 1.0.0
+
+## Install
+
+```bash
+npm i --save-dev webpack-dev-server-inject-scripts
+```
+
+## Usage
+
+Add the following to dev webpack config
+
+```js
+const injectScripts = require("webpack-dev-server-inject-scripts");
+
+...
+
+devServer: {
+  index: "",
+  port: 8080,
+  hot: true,
+  historyApiFallback: true,
+  proxy: {
+    "/": {
+      target: "http://localhost:1234", // Your backend application here
+      changeOrigin: true // play nice with upstream https
+    }
+  },
+  before: function(app, server, compiler) {
+    app.use(injectScripts(compiler));
+  }
+}
+
+```
+
+The middleware function can take an options argument for additional configuration
+
+```js
+const options = {
+  ignoredPaths: [/\/umbraco/, /\/wp-admin/]
+};
+app.use(injectScripts(compiler, options));
+```
+
+- run backend application
+- run webpack-dev-server
+
+View through the webpack-dev-server proxy
+
+## In Production
+
+Turn this off and use [HtmlWebpackPlugin](https://github.com/jantimon/html-webpack-plugin) instead
+
+## tl;dr
+
+Screenshot from example project
+
+<img src="https://user-images.githubusercontent.com/2056399/110414325-942f4c00-8087-11eb-8278-abc26b15ab91.png" width="640" alt="example" />

example/.gitignore

@@ -0,0 +1 @@
+package-lock.json

example/README.md

@@ -0,0 +1,7 @@
+# webpack-dev-server-inject-scripts example project
+To run the example
+
+```bash
+$ npm install
+$ npm start
+```

example/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "webpack-dev-server-inject-scripts-example",
+  "version": "0.0.0",
+  "description": "demo the point of this thing",
+  "license": "MIT",
+  "scripts": {
+    "start": "webpack serve"
+  },
+  "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:.."
+  }
+}