Webpack dev dependency, npm command, modify readme

README.md

@@ -31,6 +31,12 @@ Both logged in and logged out accounts can save "Snapshots," which are immutable
 2. `npm install`
 3. `npm run build`
 
+## Serve
+
+1. `git clone https://github.com/harej/hackerpaste && cd hackerpaste`
+2. `npm install`
+3. `npm run serve`
+
 ## Deploy to Skynet
 
 Anything pushed to the `main` branch of `https://github.com/harej/hackerpaste` will be automatically deployed to Skynet and made available through the Handshake domain `hackerpaste.hns` and the Ethereum domain `hackerpaste.eth`. The `main` branch should be considered the source of truth as to the latest version of Hacker Paste.

package.json

@@ -4,6 +4,7 @@
   "description": "The Secure and Decentralized Paste Bin",
   "main": "core.js",
   "dependencies": {
+    "@babel/runtime": "^7.12.0",
     "babel": "^6.23.0",
     "blakejs": "^1.1.0",
     "bootstrap": "^4.6.0",
@@ -13,14 +14,17 @@
     "crypto-browserify": "^3.12.0",
     "crypto-js": "^4.0.0",
     "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.4.0",
     "jquery": "^3.5.1",
     "marked": "^3.0.4",
     "micromodal": "^0.4.6",
     "microtip": "^0.2.2",
     "popper.js": "^1.16.1",
     "rollup": "^2.35.1",
     "slim-select": "^1.25.0",
-    "stream-browserify": "^3.0.0"
+    "stream-browserify": "^3.0.0",
+    "webpack": "^5.59.1",
+    "webpack-dev-server": "^4.3.1"
   },
   "devDependencies": {
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
@@ -29,12 +33,12 @@
     "css-loader": "^5.0.2",
     "mini-css-extract-plugin": "^1.3.7",
     "style-loader": "^2.0.0",
-    "webpack": "^5.53.0",
-    "webpack-cli": "^4.2.0"
+    "webpack-cli": "^4.9.1"
   },
   "scripts": {
     "build": "webpack",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "serve": "webpack-cli serve"
   },
   "repository": {
     "type": "git",

webpack.config.js

@@ -1,20 +1,29 @@
 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyPlugin = require("copy-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin")
 
 module.exports = {
+  mode: 'development',
+  devServer: {
+    port: 9000
+  },
+
   plugins: [
+    new HtmlWebpackPlugin({
+      template: "./index.html"
+    }),
     new MiniCssExtractPlugin(),
     new CopyPlugin({
       patterns: [
-        { from: "static", to: path.resolve(__dirname, 'build/static')},
+        { from: "static", to: path.resolve(__dirname, 'build/static') },
         { from: "manifest.json", to: path.resolve(__dirname, "build") },
-        { from: "index.html", to: path.resolve(__dirname, 'build')},
+        { from: "index.html", to: path.resolve(__dirname, 'build') },
       ],
     }),
   ],
   module: {
-    rules:[
+    rules: [
       {
         test: /\.css$/,
         use: [
@@ -37,7 +46,7 @@ module.exports = {
         use: [
           'file-loader'
         ]
-      }
+      },
     ]
   },
   entry: './src/index.js',
@@ -46,10 +55,10 @@ module.exports = {
     filename: 'bundle.js'
   },
   resolve: {
-  	fallback: {
-  		"crypto": require.resolve("crypto-browserify"),
-  		"stream": require.resolve("stream-browserify"),
-  		"buffer": require.resolve("buffer/")
-  	}
+    fallback: {
+      "crypto": require.resolve("crypto-browserify"),
+      "stream": require.resolve("stream-browserify"),
+      "buffer": require.resolve("buffer/")
+    }
   }
 };