Webpack build for dist (#2812)

Co-authored-by: Christian Oliff <christianoliff@pm.me>

dist/package.json

@@ -10,12 +10,15 @@
   "author": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack-dev-server --open --port 8080"
+    "start": "webpack serve --open --config webpack.config.dev.js",
+    "build": "webpack --config webpack.config.prod.js"
   },
   "devDependencies": {
-    "webpack": "^5.74.0",
+    "copy-webpack-plugin": "^11.0.0",
     "html-webpack-plugin": "^5.5.0",
+    "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.11.1"
+    "webpack-dev-server": "^4.11.1",
+    "webpack-merge": "^5.8.0"
   }
 }

dist/webpack.common.js

@@ -0,0 +1,12 @@
+const path = require('path');
+
+module.exports = {
+  entry: {
+    app: './js/app.js',
+  }, 
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    clean: true,
+    filename: './js/app.js',
+  },
+};

dist/webpack.config.dev.js

@@ -0,0 +1,16 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'inline-source-map',
+  devServer: {
+    liveReload: true,
+    hot: true,
+    open: true,
+    static: ['./'],
+  },
+});
+
+

dist/webpack.config.js

@@ -1,16 +0,0 @@
-const HtmlWebpackPlugin =  require('html-webpack-plugin');
-module.exports = {
-  mode : 'development',
-  entry : './js/app.js',
-  devServer: {
-    liveReload: true,
-    hot: true,
-    open: true,
-    static: ['./'],
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: './index.html'
-    })
-  ]
-};

dist/webpack.config.prod.js

@@ -0,0 +1,28 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+const HtmlWebpackPlugin =  require('html-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+
+module.exports = merge(common, {
+  mode: 'production',
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './index.html'
+    }),
+    new CopyPlugin({
+      patterns: [
+        { from: 'img', to: 'img' },
+        { from: 'css', to: 'css' },
+        { from: 'js/vendor', to: 'js/vendor' },
+        { from: 'icon.svg', to: 'icon.svg'},
+        { from: 'favicon.ico', to: 'favicon.ico'},
+        { from: 'tile-wide.png', to: 'tile-wide.png'},
+        { from: 'robots.txt', to: 'robots.txt'},
+        { from: 'icon.png', to: 'icon.png'},
+        { from: '404.html', to: '404.html'},
+        { from: 'site.webmanifest', to: 'site.webmanifest'},
+        { from: 'tile.png', to: 'tile.png'}
+      ],
+    })
+  ],
+});