[Test] Webpack

+import "../scss/style.scss";

+body {
+  background-color: red;
+}

@@ -4,7 +4,9 @@
   "description": "make Youtube Website",
   "description": "make Youtube Website",
   "main": "app.js",
   "main": "app.js",
   "scripts": {
   "scripts": {
-    "start": "nodemon --exec babel-node init.js --delay 2"
+    "dev:server": "nodemon --exec babel-node init.js --delay 2",
+    "dev:assets": "WEBPACK_ENV=development webpack",
+    "build:assets": "WEBPACK_ENV=production webpack"
   },
   },
   "repository": {
   "repository": {
     "type": "git",
     "type": "git",
@@ -20,11 +22,14 @@
     "cookie-parser": "^1.4.5",
     "cookie-parser": "^1.4.5",
     "dotenv": "^8.2.0",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
     "express": "^4.17.1",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "helmet": "^3.22.0",
     "helmet": "^3.22.0",
     "mongoose": "^5.9.15",
     "mongoose": "^5.9.15",
     "morgan": "^1.10.0",
     "morgan": "^1.10.0",
     "multer": "^1.4.2",
     "multer": "^1.4.2",
-    "pug": "^2.0.4"
+    "pug": "^2.0.4",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11"
   },
   },
   "devDependencies": {
   "devDependencies": {
     "eslint": "^6.8.0",
     "eslint": "^6.8.0",

+const path = require("path");
+const ExtractCSS = require("extract-text-webpack-plugin");
+
+const MODE = process.env.WEBPACK_ENV;
+const ENTRY_FILE = path.resolve(__dirname, "assets", "js", "main.js");
+const OUTPUT_DIR = path.join(__dirname, "static");
+
+const config = {
+  entry: ENTRY_FILE,
+  mode: MODE,
+  module: {
+    rules: [
+      {
+        test: /\.(scss|sass)$/,
+        use: ExtractCSS.extract(
+          {
+            loader: "css-loader",
+          },
+          {
+            loader: "postcss-loader",
+          },
+          {
+            loader: "sass-loader",
+          }
+        ),
+      },
+    ],
+  },
+  output: {
+    path: OUTPUT_DIR,
+    filename: "[name].[format]",
+  },
+};
+
+module.exports = config;