diff --git a/html/package.json b/html/package.json
new file mode 100644
index 00000000..f478939d
--- /dev/null
+++ b/html/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "vrcx",
+  "version": "0.0.0",
+  "description": "VRCX is an assistant application for provide information about manage friendship. this application uses unofficial VRChat API (VRCSDK).",
+  "main": "index.js",
+  "scripts": {
+    "build": "npx webpack --mode production",
+    "watch": "npx webpack --mode development --watch --progress"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pypy-vrc/VRCX.git"
+  },
+  "keywords": [
+    "vrchat"
+  ],
+  "author": "pypy <git@pypy.moe>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/pypy-vrc/VRCX/issues"
+  },
+  "homepage": "https://github.com/pypy-vrc/VRCX#readme",
+  "devDependencies": {
+    "css-loader": "^3.4.2",
+    "html-webpack-plugin": "^4.0.3",
+    "mini-css-extract-plugin": "^0.9.0",
+    "pug": "^2.0.4",
+    "pug-loader": "^2.4.0",
+    "remove-files-webpack-plugin": "^1.4.0",
+    "sass": "^1.26.3",
+    "sass-loader": "^8.0.2",
+    "webpack": "^4.42.1",
+    "webpack-cli": "^3.3.11"
+  }
+}
diff --git a/html/webpack.config.js b/html/webpack.config.js
new file mode 100644
index 00000000..45cf3626
--- /dev/null
+++ b/html/webpack.config.js
@@ -0,0 +1,51 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const RemovePlugin = require('remove-files-webpack-plugin');
+
+module.exports = {
+    entry: {
+        app: ['./src/app.js', './src/app.scss'],
+        'app.dark': './src/app.dark.scss',
+        vr: ['./src/vr.js', './src/vr.scss']
+    },
+    output: {
+        path: __dirname,
+        filename: '[name].js'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.s?css$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    'css-loader',
+                    'sass-loader'
+                ]
+            },
+            {
+                test: /\.pug$/,
+                use: 'pug-loader'
+            }
+        ]
+    },
+    plugins: [
+        new MiniCssExtractPlugin({
+            filename: '[name].css'
+        }),
+        new HtmlWebpackPlugin({
+            filename: 'index.html',
+            template: './src/index.pug',
+            inject: false,
+            minify: false
+        }),
+        new RemovePlugin({
+            after: {
+                include: [
+                    './app.dark.js'
+                ],
+                log: false,
+                logWarning: false
+            }
+        })
+    ]
+};