initial npm setup

.eslintrc

+{
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": "eslint:recommended",
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly",
+        "require": "readonly"
+    },
+    "parserOptions": {
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "rules": {
+        "semi": ["error", "always"],
+        "quotes": ["error", "double"]
+    }
+}

.gitignore

+node_modules/
+package-lock.json

.stylelintrc

+"rules": {
+    "block-no-empty": true,
+    "color-hex-case": "lower",
+    "color-hex-length": "short",
+    "color-no-invalid-hex": true,
+    "declaration-colon-space-after": "always",
+    "max-empty-lines": 2
+}

package.json

+{
+  "name": "customer",
+  "version": "1.0.0",
+  "description": "Customer Website",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified!\" && exit 1",
+    "serve": "browser-sync start --server \"dist\" --files \"dist\"",
+    "css:scss": "node-sass --output-style compressed -o dist src/scss",
+    "css:autoprefixer": "postcss -u autoprefixer -r dist/*.css",
+    "css:lint": "stylelint src/scss/*.scss  --custom-syntax postcss-scss",
+    "build:css": "npm run css:lint && npm run css:scss && npm run css:autoprefixer",
+    "build:js": "webpack --mode=production",
+    "build:html": "posthtml -c posthtml.json",
+    "build": "run-p build:*",
+    "watch:css": "onchange \"src/scss\" -- npm run build:css",
+    "watch:js": "onchange \"src/js\" -- webpack --mode=development",
+    "watch:html": "onchange \"src/views\" -- npm run build:html",
+    "watch": "run-p serve watch:*"
+  },
+  "author": "hanfi",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/preset-env": "^7.22.2",
+    "autoprefixer": "^10.4.14",
+    "babel-loader": "^9.1.2",
+    "browser-sync": "^2.29.3",
+    "eslint": "^8.41.0",
+    "eslint-webpack-plugin": "^4.0.1",
+    "htmlnano": "^2.0.4",
+    "node-sass": "^9.0.0",
+    "npm-run-all": "^4.1.5",
+    "onchange": "^7.1.0",
+    "postcss-cli": "^10.1.0",
+    "postcss-scss": "^4.0.6",
+    "posthtml": "^0.16.6",
+    "posthtml-cli": "^0.10.0",
+    "posthtml-modules": "^0.9.1",
+    "stylelint": "^15.6.2",
+    "webpack": "^5.84.1",
+    "webpack-cli": "^5.1.1"
+  },
+  "dependencies": {
+    "@noble/curves": "^1.0.0",
+    "buffer": "^6.0.3",
+    "js-beautify": "^1.14.7",
+    "nunjucks": "^3.2.4",
+    "qr-image": "^3.2.0",
+    "qrcode": "^1.5.3",
+    "stream": "^0.0.2",
+    "zlib": "^1.0.5"
+  }
+}

posthtml.json

+{
+    "input": "src/views/*.html",
+    "output": "dist",
+    "plugins": {
+        "posthtml-modules": {
+            "root": "./src/views",
+            "initial": true
+        },
+        "htmlnano": {}
+    }
+}

webpack.config.js

+/* eslint-disable no-undef */
+const ESLintPlugin = require('eslint-webpack-plugin');
+
+module.exports = {
+    entry: './src/js/main.js',
+    plugins: [new ESLintPlugin()],
+    output: {
+        path: __dirname + '/dist',
+        filename: 'bundle.js',
+        library: 'lib'
+    },
+    module: {
+        rules: [{
+            test: /\.m?js$/,
+            exclude: /node_modules/,
+            use: {
+                loader: 'babel-loader',
+                options: {
+                    presets: ['@babel/preset-env']
+                }
+            }
+        }]
+    }
+}