update webpack & dependencies

package.json

@@ -13,23 +13,26 @@
   },
   "homepage": "https://futa.moe/amphineko/",
   "scripts": {
-    "build": "node_modules/.bin/webpack -p"
+    "build": "webpack -p",
+    "start": "webpack-dev-server"
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-free": "^5.8.1",
-    "browser-sync": "^2.26.3",
+    "@fortawesome/fontawesome-free": "^5.11.2",
+    "browser-sync": "^2.26.7",
     "browser-sync-webpack-plugin": "^2.2.2",
+    "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^2.1.1",
     "extract-loader": "^3.1.0",
     "file-loader": "^3.0.1",
     "html-loader": "^0.5.5",
     "mini-css-extract-plugin": "^0.5.0",
-    "node-sass": "^4.11.0",
-    "resolve-url-loader": "^3.1.0",
-    "sass-loader": "^7.1.0",
+    "node-sass": "^4.13.0",
+    "resolve-url-loader": "^3.1.1",
+    "sass-loader": "^7.3.1",
     "style-loader": "^0.23.1",
     "unsemantic": "^1.2.3",
-    "webpack": "^4.29.6",
-    "webpack-cli": "^3.3.0"
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.9.0"
   }
 }

webpack.config.js

@@ -1,14 +1,23 @@
 const path = require('path')
 
 const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 
 module.exports = (env, argv) => {
     const isProduction = argv.mode === 'production'
 
+    console.log(`Using mode ${isProduction ? 'PRODUCTION' : 'DEVELOPMENT'}`)
+
     return {
         context: path.resolve(__dirname, 'src'),
 
+        devServer: {
+            contentBase: path.resolve(__dirname, 'dist'),
+            port: 3100,
+        },
+
+        devtool: 'inline-source-map',
+
         mode: isProduction ? 'production' : 'development',
 
         entry: {
@@ -71,11 +80,16 @@ module.exports = (env, argv) => {
             path: path.resolve(__dirname, 'dist'),
         },
 
-        plugins: [
-            new BrowserSyncPlugin({
-                host: 'localhost',
-                server: { baseDir: ['dist'] },
-            })
-        ],
+        plugins: Array.prototype.concat([
+            new CleanWebpackPlugin(),
+        ], isProduction
+            ? []
+            : [
+                new BrowserSyncPlugin({
+                    host: 'localhost',
+                    open: false,
+                    proxy: 'http://localhost:3100/',
+                }),
+            ])
     }
 }