From a532e73b5223405ade31b3a4763e2f768f01823f Mon Sep 17 00:00:00 2001
From: hide_d <hided62@gmail.com>
Date: Thu, 2 Sep 2021 01:49:30 +0900
Subject: [PATCH] web_pack_config

---
 .gitignore         |   2 +
 package.json       |   3 +
 webpack.config.cjs | 199 +++++++++++++++++++++++++++++++++++----------
 3 files changed, 159 insertions(+), 45 deletions(-)

diff --git a/.gitignore b/.gitignore
index a72a4865..e4acb919 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,8 +33,10 @@ d_pic/*.png
 d_pic/*.webp
 d_pic/uploaded_image
 
+*/dist_misc/*
 */dist_js/*
 */dist_css/*
+/dist_misc/*
 /dist_js/*
 /dist_css/*
 
diff --git a/package.json b/package.json
index f2965ce3..0ef86497 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "core-js": "^3.16.3",
     "date-fns": "^2.23.0",
     "downloadjs": "^1.4.7",
+    "file-loader": "^6.2.0",
     "jquery": "^3.6.0",
     "js-sha512": "^0.8.0",
     "linkifyjs": "^2.1",
@@ -36,6 +37,7 @@
     "query-string": "^7.0.1",
     "select2": "^4.0",
     "summernote": "^0.8.18",
+    "url-loader": "^4.1.1",
     "vue": "^3.2.2"
   },
   "devDependencies": {
@@ -62,6 +64,7 @@
     "ts-loader": "^9.2.5",
     "typescript": "^4.4.2",
     "vue-loader": "^16.5.0",
+    "vue-style-loader": "^4.1.3",
     "webpack": "^5.51.1",
     "webpack-bundle-analyzer": "^4.4.2",
     "webpack-cli": "^4.8.0"
diff --git a/webpack.config.cjs b/webpack.config.cjs
index 2b277dba..943039e5 100644
--- a/webpack.config.cjs
+++ b/webpack.config.cjs
@@ -5,8 +5,151 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
 const { resolve } = require('path');
 
 module.exports = (env, argv) => {
-    const target = env.target??'hwe';
+    const target = env.target ?? 'hwe';
     const mode = argv.mode ?? 'production';
+    const ingame_vue = {
+        name: 'ingame_vue',
+        resolve: {
+            extensions: [".js", ".ts", ".jsx", ".tsx", ".vue"],
+            alias: {
+                vue: "@vue/runtime-dom"
+            }
+        },
+        mode,
+        entry: {
+            //v_test: resolve(__dirname, `${target}/ts/v_test.ts`)
+        },
+        output: {
+            filename: '[name].js',
+            path: resolve(__dirname, `${target}/dist_js`)
+        },
+        devtool: 'source-map',
+        optimization: {
+            splitChunks: {
+                cacheGroups: {
+                    commons: {
+                        test: /[\\/]node_modules[\\/]/,
+                        name: 'vendors_vue',
+                        chunks: 'all',
+                    },
+                },
+            }
+        },
+        module: {
+            rules: [
+                //FROM `vue inspect` and some tweaks
+                {
+                    test: /\.(ts|tsx)$/,
+                    exclude: /(node_modules)/,
+                    use: [
+                        'babel-loader',
+                        {
+                            loader: 'ts-loader',
+                            options: {
+                                transpileOnly: true,
+                                appendTsSuffixTo: [
+                                    '\\.vue$'
+                                ],
+                                happyPackMode: false
+                            }
+                        }
+                    ]
+                },
+                {
+                    test: /\.vue$/,
+                    loader: 'vue-loader',
+                    exclude: /(node_modules)/,
+                    options: {
+                        /*transformAssetUrls: {
+                            png: [],
+                        },*/
+                        hotReload: false,
+                    }
+                },
+                {
+                    test: /\.vue\.(s?[ac]ss)$/,
+                    use: ['vue-style-loader', 'css-loader', 'sass-loader']
+                },
+                {
+                    test: /(?<!\.vue)\.(s?[ac]ss)$/,
+                    use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
+                },
+                {
+                    test: /\.(png|jpe?g|gif|webp)$/,
+                    use: [
+                        {
+                            loader: 'url-loader',
+                            options: {
+                                limit: 4096,
+                                fallback: {
+                                    loader: 'file-loader',
+                                    options: {
+                                        name: '../dist_misc/[name].[contenthash:8].[ext]'
+                                    }
+                                }
+                            }
+                        }
+                    ]
+                },
+                {
+                    test: /\.(svg)$/,
+                    use: [
+                        {
+                            loader: 'file-loader',
+                            options: {
+                                name: '../dist_misc/[name].[contenthash:8].[ext]'
+                            }
+                        }
+                    ]
+                },
+                {
+                    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)$/,
+                    use: [
+                        {
+                            loader: 'url-loader',
+                            options: {
+                                limit: 4096,
+                                fallback: {
+                                    loader: 'file-loader',
+                                    options: {
+                                        name: '../dist_misc/[name].[contenthash:8].[ext]'
+                                    }
+                                }
+                            }
+                        }
+                    ]
+                },
+                {
+                    test: /\.(woff2?|eot|ttf|otf)$/i,
+                    use: [
+                        {
+                            loader: 'url-loader',
+                            options: {
+                                limit: 4096,
+                                fallback: {
+                                    loader: 'file-loader',
+                                    options: {
+                                        name: '../dist_misc/[name].[contenthash:8].[ext]'
+                                    }
+                                }
+                            }
+                        }
+                    ]
+                },
+            ]
+        },
+        plugins: [
+            new VueLoaderPlugin(),
+            new MiniCssExtractPlugin({
+                filename: '../dist_css/[name].css'
+            }),
+            //new BundleAnalyzerPlugin()
+        ],
+        cache: {
+            type: 'filesystem',
+            allowCollectingMemory: true,
+        },
+    };
     const ingame = {
         name: 'ingame',
         resolve: {
@@ -77,29 +220,13 @@ module.exports = (env, argv) => {
                         ]
                     }
                 }, 'ts-loader']
-            }, {
-                test: /\.vue$/i,
-                exclude: /(node_modules)/,
-                use: [
-                    'vue-loader'
-                ]
-            }, {
-                test: /\.css$/i,
-                use: [
-                    MiniCssExtractPlugin.loader,
-                    "css-loader",
-                ],
-            }, {
-                test: /\.s[ac]ss$/i,
-                use: [
-                    MiniCssExtractPlugin.loader,
-                    "css-loader",
-                    "sass-loader",
-                ],
+            },
+            {
+                test: /.(s?[ac]ss)$/,
+                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
             }]
         },
         plugins: [
-            new VueLoaderPlugin(),
             new MiniCssExtractPlugin({
                 filename: '../dist_css/[name].css'
             }),
@@ -162,30 +289,12 @@ module.exports = (env, argv) => {
                         ]
                     }
                 }
-            },
-            {
-                test: /\.vue$/i,
-                exclude: /(node_modules)/,
-                use: [
-                    { loader: 'vue-loader' }
-                ]
             }, {
-                test: /\.css$/i,
-                use: [
-                    MiniCssExtractPlugin.loader,
-                    "css-loader",
-                ],
-            }, {
-                test: /\.s[ac]ss$/i,
-                use: [
-                    MiniCssExtractPlugin.loader,
-                    "css-loader",
-                    "sass-loader",
-                ],
+                test: /.(s?[ac]ss)$/,
+                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
             }]
         },
         plugins: [
-            new VueLoaderPlugin(),
             new MiniCssExtractPlugin({
                 filename: '../dist_css/[name].css'
             }),
@@ -197,10 +306,10 @@ module.exports = (env, argv) => {
         },
     };
 
-    if(target == 'hwe'){
-        return [ingame, gateway];
+    if (target == 'hwe') {
+        return [ingame_vue, ingame, gateway];
     }
-    else{
-        return [ingame];
+    else {
+        return [ingame_vue, ingame];
     }
 }