build(WIP): php단에서 변경된 dist_js에 맞게 js,css 로드

- fix: webpack 출력물 문제
- webpack splitChunks 파일 통일

hwe/index.php

@@ -118,15 +118,9 @@ if (!$otherTextInfo) {
     <meta name="viewport" content="width=500" />
     <?= WebUtil::printJS('../d_shared/common_path.js') ?>
     <?= WebUtil::printJS('d_shared/base_map.js') ?>
-    <?= WebUtil::printJS('dist_js/vendors_vue.js', true) ?>
-    <?= WebUtil::printJS('dist_js/common_vue.js', true) ?>
-    <?= WebUtil::printJS('dist_js/v_main.js', true) ?>
-
     <?= WebUtil::printCSS('../d_shared/common.css') ?>
-    <?= WebUtil::printCSS('dist_css/common.css') ?>
+    <?= WebUtil::printDist('vue', 'v_main', true) ?>
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />
-    <?= WebUtil::printCSS('dist_css/common_vue.css') ?>
-    <?= WebUtil::printCSS('dist_css/v_main.css') ?>
     <?= WebUtil::printCSS('css/map.css') ?>
     <?= WebUtil::printStaticValues([
         'serverNick' => DB::prefix(),

hwe/ts/v_main.ts

@@ -1,4 +1,5 @@
 import '@scss/main.scss';
+import "@scss/common_legacy.scss";
 
 exportWindow(scrollHardTo, 'scrollHardTo');
 

src/sammo/WebUtil.php

@@ -139,6 +139,43 @@ class WebUtil
         return static::preloadAsset($path, 'script');
     }
 
+    public static function printDist(string $type, string|array $entryName, bool $isDefer = false){
+        if(is_string($entryName)){
+            $entryName = [$entryName];
+        }
+        if(is_subclass_of('\\sammo\\VersionGit', '\\sammo\\VersionGitDynamic')){
+            $version = DB::prefix().'_dynamic';
+        }
+        else{
+            $version = VersionGit::getVersion();
+        }
+
+        $basePath = dirname(__DIR__, 2)."/dist_js/{$version}/{$type}";
+        $serverBasePath = \phpUri::parse(ServConfig::$serverWebPath)->path;
+        $serverBasePath .= "/dist_js/{$version}/{$type}";
+
+        $outputs = ["\n"];
+
+        foreach(["vendors", "common_ts", ...$entryName] as $moduleName){
+            foreach(['js', 'css'] as $ext){
+                $checkPath = $basePath."/{$moduleName}.{$ext}";
+                if (!file_exists($checkPath)) {
+                    $outputs[] = "<!-- '{$version}/{$type}/{$moduleName}.{$ext}' -->\n";
+                    continue;
+                }
+                $mtime = filemtime($checkPath);
+                if($ext == 'css'){
+                    $outputs[] = "<link  href='{$serverBasePath}/{$moduleName}.{$ext}?{$mtime}' rel='stylesheet' type='text/css' />\n";
+                }
+                else if($ext == 'js'){
+                    $typeText = $isDefer ? 'defer' : '';
+                    $outputs[] = "<script src='{$serverBasePath}/{$moduleName}.{$ext}?{$mtime}' {$typeText}></script>\n";
+                }
+            }
+        }
+        return join("", $outputs);
+    }
+
     public static function printJS(string $path, bool $isDefer = false)
     {
         //async 옵션 고려?

webpack.config.cjs

@@ -33,7 +33,7 @@ module.exports = (env, argv) => {
         let emitDone = false;
         let writeDone = false;
         return function (percentage, msg, ...args) {
-            if(msg == 'emitting'){
+            if (msg == 'emitting') {
                 emitDone = true;
             }
             if (percentage == 0) {
@@ -59,6 +59,33 @@ module.exports = (env, argv) => {
         entryIngame[entry] = `${tsDir}/${filePath}`;
     }
 
+    const optimization = {
+        splitChunks: {
+            cacheGroups: {
+                commons: {
+                    test: /[\\/]node_modules[\\/]/,
+                    name: 'vendors',
+                    priority: -10,
+                    chunks: 'all',
+                    reuseExistingChunk: true,
+                },
+                default: {
+                    name: 'common_ts',
+                    minChunks: 2,
+                    priority: -20,
+                    chunks: 'all',
+                    reuseExistingChunk: true,
+                },
+            },
+        },
+        minimizer: [
+            new ESBuildMinifyPlugin({
+                css: true
+            }),
+        ],
+        moduleIds: 'deterministic',
+    };
+
     const ingame_vue = {
         name: `ingame_${versionTarget}_vue`,
         resolve: {
@@ -77,32 +104,7 @@ module.exports = (env, argv) => {
             path: resolve(outputPath, 'vue')
         },
         devtool: 'source-map',
-        optimization: {
+        optimization,
-            splitChunks: {
-                cacheGroups: {
-                    commons: {
-                        test: /[\\/]node_modules[\\/]/,
-                        name: 'vendors_vue',
-                        priority: -10,
-                        chunks: 'all',
-                        reuseExistingChunk: true,
-                    },
-                    default: {
-                        name: 'common_vue',
-                        minChunks: 2,
-                        priority: -20,
-                        chunks: 'all',
-                        reuseExistingChunk: true,
-                    },
-                },
-            },
-            minimizer: [
-                new ESBuildMinifyPlugin({
-                    css: true
-                }),
-            ],
-            moduleIds: 'deterministic',
-        },
         module: {
             rules: [
                 //FROM `vue inspect` and some tweaks
@@ -211,30 +213,7 @@ module.exports = (env, argv) => {
             path: resolve(outputPath, 'ts')
         },
         devtool: 'source-map',
-        optimization: {
+        optimization,
-            splitChunks: {
-                cacheGroups: {
-                    commons: {
-                        test: /[\\/]node_modules[\\/]/,
-                        name: 'vendors',
-                        chunks: 'all',
-                    },
-                    default: {
-                        name: 'common_ts',
-                        minChunks: 2,
-                        priority: -20,
-                        chunks: 'all',
-                        reuseExistingChunk: true,
-                    },
-                },
-            },
-            minimizer: [
-                new ESBuildMinifyPlugin({
-                    css: true
-                }),
-            ],
-            moduleIds: 'deterministic',
-        },
         module: {
             rules: [{
                 test: /\.ts$/,
@@ -319,30 +298,7 @@ module.exports = (env, argv) => {
             path: resolve(outputPath, 'gateway')
         },
         devtool: 'source-map',
-        optimization: {
+        optimization,
-            splitChunks: {
-                cacheGroups: {
-                    commons: {
-                        test: /[\\/]node_modules[\\/]/,
-                        name: 'vendors',
-                        chunks: 'all',
-                    },
-                    default: {
-                        name: 'common_ts',
-                        minChunks: 2,
-                        priority: -20,
-                        chunks: 'all',
-                        reuseExistingChunk: true,
-                    },
-                },
-            },
-            minimizer: [
-                new ESBuildMinifyPlugin({
-                    css: true
-                }),
-            ],
-            moduleIds: 'deterministic',
-        },
         module: {
             rules: [{
                 test: /\.ts$/,
@@ -397,9 +353,8 @@ module.exports = (env, argv) => {
         },
     };
 
-    if(env.WEBPACK_WATCH || !versionValue){
+    if (env.WEBPACK_WATCH || !versionValue) {
-        return [ingame_vue];
+        return [gateway, ingame_vue, ingame];
-        //return [gateway, ingame_vue, ingame];
     }
 
     const buildConfList = [];