Initial project structure with webpack and webpack-plugin and watch mode

Benjamin-Re · Apr 6, 2022 · 2e88007 · 2e88007
commit 2e88007
Show file tree

Hide file tree

Showing 9 changed files with 7,074 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+/node_modules/
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Output Management</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="dist/main.js"></script></head>
+  <body>
+  </body>
+</html>
diff --git a/dist/main.js b/dist/main.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "todo",
+  "version": "1.0.0",
+  "description": "",
+  "private": true,
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "watch": "webpack --watch",
+    "build": "webpack"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "css-loader": "^6.7.1",
+    "html-webpack-plugin": "^5.5.0",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.71.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.8.1"
+  },
+  "start": "webpack serve --open"
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,3 @@
+import printMe from "./print.js";
+import css from './style.css';
+printMe();
diff --git a/src/print.js b/src/print.js
@@ -0,0 +1,3 @@
+export default function printMe() {
+    console.log('I get called from print.js!');
+  }
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,3 @@
+body {
+    background-color: blanchedalmond;
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,27 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: ["style-loader", "css-loader"],
+      },
+    ],
+  },
+  devServer: {
+    static: "./dist",
+  },
+
+  mode: "development",
+  entry: "./src/index.js",
+  output: {
+    filename: "main.js",
+    publicPath: "dist",
+  },
+
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: "Output Management",
+    }),
+  ],
+};