fix: using webpack

html/.gitignore

@@ -1,3 +1,2 @@
 node_modules/
 dist/
-/mix-manifest.json

html/package.json

@@ -1,13 +1,9 @@
 {
   "private": true,
   "scripts": {
-    "dev": "npm run development",
+    "dev": "webpack --config webpack.config.js --mode development",
-    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "watch": "webpack --config webpack.config.js --mode development --watch",
-    "watch": "npm run development -- --watch",
+    "prod": "webpack --config webpack.config.js --mode production"
-    "watch-poll": "npm run watch -- --watch-poll",
-    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "prod": "npm run production",
-    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
   },
   "repository": {
     "type": "git",
@@ -23,26 +19,28 @@
   },
   "homepage": "https://github.com/pypy-vrc/VRCX#readme",
   "devDependencies": {
-    "cross-env": "^7.0.3",
-    "html-webpack-plugin": "^4.5.2",
-    "laravel-mix": "^5.0.9",
-    "pug": "^3.0.2",
-    "pug-loader": "^2.4.0",
-    "resolve-url-loader": "^3.1.2",
-    "sass": "^1.32.8",
-    "sass-loader": "^10.1.1",
-    "vue-template-compiler": "^2.6.12"
-  },
-  "dependencies": {
     "animate.css": "^4.1.1",
+    "copy-webpack-plugin": "^8.1.1",
+    "css-loader": "^5.2.4",
     "element-ui": "^2.15.1",
     "famfamfam-flags": "^1.0.0",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.3.1",
+    "mini-css-extract-plugin": "^1.5.0",
     "normalize.css": "^8.0.1",
     "noty": "^3.2.0-beta-deprecated",
+    "pug": "^3.0.2",
+    "pug-plain-loader": "^1.1.0",
+    "raw-loader": "^4.0.2",
+    "sass": "^1.32.11",
+    "sass-loader": "^11.0.1",
+    "url-loader": "^4.1.1",
     "vue": "^2.6.12",
     "vue-data-tables": "^3.4.5",
     "vue-lazyload": "^1.3.3",
     "vue-swatches": "^2.1.1",
-    "vuejs-toggle-switch": "^1.3.2"
+    "vuejs-toggle-switch": "^1.3.3",
+    "webpack": "^5.34.0",
+    "webpack-cli": "^4.6.0"
   }
 }

html/webpack.config.js

@@ -0,0 +1,126 @@
+const path = require('path');
+const CopyPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-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: {
+        filename: '[name].js',
+        library: {
+            type: 'window'
+        }
+    },
+    module: {
+        rules: [
+            {
+                test: /\.pug$/,
+                oneOf: [
+                    {
+                        resourceQuery: /^\?vue/,
+                        use: 'pug-plain-loader'
+                    },
+                    {
+                        use: ['raw-loader', 'pug-plain-loader']
+                    }
+                ]
+            },
+            {
+                test: /\.s?css$/,
+                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
+            },
+            {
+                test: /\.(eot|png|svg|ttf|woff)/,
+                use: {
+                    loader: 'url-loader',
+                    options: {
+                        limit: false,
+                        name: 'assets/[name].[ext]'
+                    }
+                }
+            }
+        ]
+    },
+    resolve: {
+        extensions: ['.css', '.js', '.scss'],
+        alias: {
+            vue: path.join(
+                __dirname,
+                './node_modules/vue/dist/vue.common.prod.js'
+            )
+        }
+    },
+    performance: {
+        hints: false
+    },
+    devtool: 'inline-source-map',
+    target: ['web', 'es2020'],
+    stats: {
+        preset: 'errors-only',
+        builtAt: true,
+        timings: true
+    },
+    plugins: [
+        new MiniCssExtractPlugin({
+            filename: '[name].css'
+        }),
+        new HtmlWebpackPlugin({
+            filename: 'index.html',
+            template: './src/index.pug',
+            inject: false,
+            minify: false
+        }),
+        new HtmlWebpackPlugin({
+            filename: 'vr.html',
+            template: './src/vr.pug',
+            inject: false,
+            minify: false
+        }),
+        new CopyPlugin({
+            patterns: [
+                // assets
+                {
+                    from: './images/',
+                    to: './images/'
+                },
+                // // vscode-codicons
+                // {
+                //     from: './node_modules/vscode-codicons/dist/codicon.css',
+                //     to: 'vendor/vscode-codicons/'
+                // },
+                // {
+                //     from: './node_modules/vscode-codicons/dist/codicon.ttf',
+                //     to: 'vendor/vscode-codicons/'
+                // },
+                // // fontawesome
+                // {
+                //     from: './node_modules/@fortawesome/fontawesome-free/webfonts/',
+                //     to: 'vendor/fontawesome/webfonts/'
+                // },
+                // {
+                //     from: './node_modules/@fortawesome/fontawesome-free/css/all.min.css',
+                //     to: 'vendor/fontawesome/css/'
+                // },
+                // // element-plus
+                // {
+                //     from: './node_modules/element-plus/lib/theme-chalk/fonts/',
+                //     to: 'vendor/element-plus/lib/theme-chalk/fonts/'
+                // },
+                // {
+                //     from: './node_modules/element-plus/lib/theme-chalk/index.css',
+                //     to: 'vendor/element-plus/lib/theme-chalk/'
+                // }
+            ]
+        })
+    ]
+};

html/webpack.mix.js

@@ -1,79 +0,0 @@
-var path = require('path');
-var mix = require('laravel-mix');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-
-mix.disableNotifications();
-
-mix.options({
-    processCssUrls: false
-});
-
-mix.override(function (webpackConfig) {
-    webpackConfig.resolve.alias['@'] = path.resolve('src'); // scss
-    webpackConfig.module.rules.push({
-        test: /\.pug$/,
-        use: 'pug-loader'
-    });
-    webpackConfig.plugins.push(new HtmlWebpackPlugin({
-        filename: 'dist/index.html',
-        template: 'src/index.pug',
-        inject: false,
-        minify: false
-    }));
-    webpackConfig.plugins.push(new HtmlWebpackPlugin({
-        filename: 'dist/vr.html',
-        template: 'src/vr.pug',
-        inject: false,
-        minify: false
-    }));
-});
-
-// vendor
-mix.copyDirectory('node_modules/element-ui/lib/theme-chalk/fonts/', 'dist/fonts/');
-mix.copyDirectory('node_modules/famfamfam-flags/dist/sprite/famfamfam-flags.png', 'dist/');
-
-// app
-mix.copyDirectory('images/', 'dist/images/');
-mix.js('src/app.js', 'dist/');
-mix.js('src/vr.js', 'dist/');
-mix.sass('src/app.scss', 'dist/');
-mix.sass('src/app.dark.scss', 'dist/');
-mix.sass('src/vr.scss', 'dist/');
-
-// Full API
-// mix.js(src, output);
-// mix.react(src, output); <-- Identical to mix.js(), but registers React Babel compilation.
-// mix.preact(src, output); <-- Identical to mix.js(), but registers Preact compilation.
-// mix.coffee(src, output); <-- Identical to mix.js(), but registers CoffeeScript compilation.
-// mix.ts(src, output); <-- TypeScript support. Requires tsconfig.json to exist in the same folder as webpack.mix.js
-// mix.extract(vendorLibs);
-// mix.sass(src, output);
-// mix.less(src, output);
-// mix.stylus(src, output);
-// mix.postCss(src, output, [require('postcss-some-plugin')()]);
-// mix.browserSync('my-site.test');
-// mix.combine(files, destination);
-// mix.babel(files, destination); <-- Identical to mix.combine(), but also includes Babel compilation.
-// mix.copy(from, to);
-// mix.copyDirectory(fromDir, toDir);
-// mix.minify(file);
-// mix.sourceMaps(); // Enable sourcemaps
-// mix.version(); // Enable versioning.
-// mix.disableNotifications();
-// mix.setPublicPath('path/to/public');
-// mix.setResourceRoot('prefix/for/resource/locators');
-// mix.autoload({}); <-- Will be passed to Webpack's ProvidePlugin.
-// mix.webpackConfig({}); <-- Override webpack.config.js, without editing the file directly.
-// mix.babelConfig({}); <-- Merge extra Babel configuration (plugins, etc.) with Mix's default.
-// mix.then(function () {}) <-- Will be triggered each time Webpack finishes building.
-// mix.override(function (webpackConfig) {}) <-- Will be triggered once the webpack config object has been fully generated by Mix.
-// mix.dump(); <-- Dump the generated webpack config object to the console.
-// mix.extend(name, handler) <-- Extend Mix's API with your own components.
-// mix.options({
-//   extractVueStyles: false, // Extract .vue component styling to file, rather than inline.
-//   globalVueStyles: file, // Variables file to be imported in every component.
-//   processCssUrls: true, // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
-//   purifyCss: false, // Remove unused CSS selectors.
-//   terser: {}, // Terser-specific options. https://github.com/webpack-contrib/terser-webpack-plugin#options
-//   postCss: [] // Post-CSS options: https://github.com/postcss/postcss/blob/master/docs/plugins.md
-// });