webpack: scss, vue (#189)

WebPack에 scss와 vue를 사용할 수 있도록 세팅.

현재는 php서버와 코드가 강하게 엮여있기 때문에 vue-cli 대신 수동으로 webpack에 등록.

파일 번들링 경로는 다음과 같음

- scss + style -> css
- ts -> js

Reviewed-on: https://storage.hided.net/gitea/devsam/core/pulls/189
Co-authored-by: hide_d <hided62@gmail.com>
Co-committed-by: hide_d <hided62@gmail.com>

.babelrc

@@ -5,10 +5,15 @@
             {
                 "targets": {
                     "browsers": [
-                        "last 2 versions"
+                        [
+                            "last 2 versions",
+                            "ie >= 11"
+                        ]
                     ]
                 },
-                "modules":false
+                "useBuiltIns": "usage",
+                "corejs": 3,
+                "modules": false
             }
         ]
     ],

hwe/b_inheritPoint.php

@@ -43,6 +43,8 @@ foreach(array_keys(General::INHERITANCE_KEY) as $key){
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=1024" />
+    <?= WebUtil::preloadCSS('css/inheritPoint.css') ?>
+    <?= WebUtil::preloadJS('js/inheritPoint.js') ?>
     <?= WebUtil::printCSS('../e_lib/bootstrap.min.css') ?>
     <?= WebUtil::printCSS('../d_shared/common.css') ?>
     <?= WebUtil::printCSS('../css/config.css') ?>
@@ -52,14 +54,13 @@ foreach(array_keys(General::INHERITANCE_KEY) as $key){
     <?= WebUtil::printJS('../e_lib/jquery-3.3.1.min.js') ?>
     <?= WebUtil::printJS('../e_lib/bootstrap.bundle.min.js') ?>
     <?= WebUtil::printJS('js/common.js') ?>
-    <?= WebUtil::printJS('js/inheritPoint.js') ?>
 <script>
     var items = <?=Json::encode($items)?>;
     var helpText = <?=Json::encode($pointHelpText)?>;
 </script>
 </head>
 
-<body onload="formStart()">
+<body>
 
     <table style='width:1000px;margin:auto;' class='tb_layout bg0'>
         <tr>
@@ -126,6 +127,9 @@ foreach(array_keys(General::INHERITANCE_KEY) as $key){
             <?php endforeach; ?>
         </div>
     </div>
+    <div id="app"></div>
+    
+    <?= WebUtil::printJS('js/inheritPoint.js') ?>
 </body>
 
 </html>

hwe/css/inheritPoint.css

@@ -1,23 +1,3 @@
-#inheritance_list{
+#inheritance_list{display:flex;flex-wrap:wrap}.inherit_padding{width:33%;padding:10px 2px}.inherit_item{width:33%;padding:10px 2px}.col-form-label{text-align:right;padding-right:2ch}.inherit_value{text-align:right}
-    display: flex;
-    flex-wrap: wrap;
-}
 
-.inherit_padding{
+/*# sourceMappingURL=inheritPoint.css.map*/
-    width: 33%;
-    padding: 10px 2px;
-}
-
-.inherit_item{
-    width: 33%;
-    padding: 10px 2px;
-}
-
-.col-form-label{
-    text-align:right;
-    padding-right:2ch;
-}
-
-.inherit_value{
-    text-align: right;
-}

hwe/css/inheritPoint.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"../css/inheritPoint.css","mappings":"AAAA,kBACI,aACA,eAGJ,iBACI,UACA,iBAGJ,cACI,UACA,iBAGJ,gBACI,iBACA,kBAGJ,eACI,iB","sources":["webpack://hidche_lib/./hwe/scss/inheritPoint.scss"],"sourcesContent":["#inheritance_list{\n    display: flex;\n    flex-wrap: wrap;\n}\n\n.inherit_padding{\n    width: 33%;\n    padding: 10px 2px;\n}\n\n.inherit_item{\n    width: 33%;\n    padding: 10px 2px;\n}\n\n.col-form-label{\n    text-align:right;\n    padding-right:2ch;\n}\n\n.inherit_value{\n    text-align: right;\n}"],"names":[],"sourceRoot":""}

hwe/js/inheritPoint.js

@@ -1,2 +1,2 @@
-(()=>{var t={762:t=>{t.exports=function(t,e){for(var r,n=-1,o=t.length;++n<o;){var u=e(t[n]);void 0!==u&&(r=void 0===r?u:r+u)}return r}},557:t=>{t.exports=function(t){return t}},297:(t,e,r)=>{var n=r(762),o=r(557);t.exports=function(t){return t&&t.length?n(t,o):0}}},e={};function r(n){var o=e[n];if(void 0!==o)return o.exports;var u=e[n]={exports:{}};return t[n](u,u.exports,r),u.exports}r.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return r.d(e,{a:e}),e},r.d=(t,e)=>{for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),(()=>{"use strict";var t=r(297),e=r.n(t);function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function u(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&y(t,e)}function c(t){var e=p();return function(){var r,n=v(t);if(e){var o=v(this).constructor;r=Reflect.construct(n,arguments,o)}elsLine truncated
+(()=>{var t={762:t=>{t.exports=function(t,e){for(var r,n=-1,o=t.length;++n<o;){var u=e(t[n]);void 0!==u&&(r=void 0===r?u:r+u)}return r}},557:t=>{t.exports=function(t){return t}},297:(t,e,r)=>{var n=r(762),o=r(557);t.exports=function(t){return t&&t.length?n(t,o):0}}},e={};function r(n){var o=e[n];if(void 0!==o)return o.exports;var u=e[n]={exports:{}};return t[n](u,u.exports,r),u.exports}r.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return r.d(e,{a:e}),e},r.d=(t,e)=>{for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),(()=>{"use strict";var t=r(297),e=r.n(t);function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function u(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&y(t,e)}function c(t){var e=p();return function(){var r,n=v(t);if(e){var o=v(this).constructor;r=Reflect.construct(n,arguments,o)}elsLine truncated
 //# sourceMappingURL=inheritPoint.js.map

hwe/js/inheritPoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"inheritPoint.js","mappings":"qBAuBAA,EAAOC,QAdP,SAAiBC,EAAOC,GAKtB,IAJA,IAAIC,EACAC,GAAS,EACTC,EAASJ,EAAMI,SAEVD,EAAQC,GAAQ,CACvB,IAAIC,EAAUJ,EAASD,EAAMG,SACbG,IAAZD,IACFH,OAAoBI,IAAXJ,EAAuBG,EAAWH,EAASG,GAGxD,OAAOH,I,QCATJ,EAAOC,QAJP,SAAkBQ,GAChB,OAAOA,I,cCjBT,IAAIC,EAAU,EAAQ,KAClBC,EAAW,EAAQ,KAsBvBX,EAAOC,QANP,SAAaC,GACX,OAAQA,GAASA,EAAMI,OACnBI,EAAQR,EAAOS,GACf,KCnBFC,EAA2B,GAG/B,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBN,IAAjBO,EACH,OAAOA,EAAad,QAGrB,IAAID,EAASY,EAAyBE,GAAY,CAGjDb,QAAS,IAOV,OAHAe,EAAoBF,GAAUd,EAAQA,EAAOC,QAASY,GAG/Cb,EAAOC,QCpBfY,EAAoBI,EAAKjB,IACxB,IAAIkB,EAASlB,GAAUA,EAAOmB,WAC7B,IAAOnB,EAAiB,QACxB,IAAM,EAEP,OADAa,EAAoBO,EAAEF,EAAQ,CAAEG,EAAGH,IAC5BA,GCLRL,EAAoBO,EAAI,CAACnB,EAASqB,KACjC,IAAI,IAAIC,KAAOD,EACXT,EAAoBW,EAAEF,EAAYC,KAASV,EAAoBW,EAAEvB,EAASsB,IAC5EE,OAAOC,eAAezB,EAASsB,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,MCJ3EV,EAAoBW,EAAI,CAACK,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,G,o2ECG3E,IAeMI,EAAb,yLACkB,mBADlB,YAfA,uB,IAAA,OAEI,aAAyC,MAAtBC,EAAsB,uDAAJ,GAAI,qBACrC,cAAMA,IAD+B,OAD3B,gBAC2B,EAAtBA,QAAAA,EAAsB,EAF7C,O,EAAA,G,EAAA,uBAKI,WACI,OAAIC,KAAKD,QACEC,KAAKC,KAAO,KAAOD,KAAKD,QAGxBC,KAAKC,U,iBAVxB,KAAkCC,SAmB3B,SAASC,EAAUnC,GACtB,GAAIA,MAAAA,EACA,MAAM,IAAI8B,EAEd,OAAO9B,E,87BCWXoC,OAAOC,UAzBP,WAEI,IAAMC,EAAOH,EAAOI,SAASC,cAAc,uBACrCC,EAAON,EAAOI,SAASC,cAAc,4BACrCE,EAAOP,EAAOI,SAASC,cAAc,uBAErCG,EAAWC,KAAKC,MAAM,IAAIxB,OAAOyB,OAAOV,OAAOW,SAC/CC,EAAWJ,KAAKC,MAAMT,OAAOW,MAAP,UACtBE,EAAcN,EAAWK,EAE/BV,EAAKjC,MAAQsC,EAASOLine truncated
+{"version":3,"file":"inheritPoint.js","mappings":"qBAuBAA,EAAOC,QAdP,SAAiBC,EAAOC,GAKtB,IAJA,IAAIC,EACAC,GAAS,EACTC,EAASJ,EAAMI,SAEVD,EAAQC,GAAQ,CACvB,IAAIC,EAAUJ,EAASD,EAAMG,SACbG,IAAZD,IACFH,OAAoBI,IAAXJ,EAAuBG,EAAWH,EAASG,GAGxD,OAAOH,I,QCATJ,EAAOC,QAJP,SAAkBQ,GAChB,OAAOA,I,cCjBT,IAAIC,EAAU,EAAQ,KAClBC,EAAW,EAAQ,KAsBvBX,EAAOC,QANP,SAAaC,GACX,OAAQA,GAASA,EAAMI,OACnBI,EAAQR,EAAOS,GACf,KCnBFC,EAA2B,GAG/B,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBN,IAAjBO,EACH,OAAOA,EAAad,QAGrB,IAAID,EAASY,EAAyBE,GAAY,CAGjDb,QAAS,IAOV,OAHAe,EAAoBF,GAAUd,EAAQA,EAAOC,QAASY,GAG/Cb,EAAOC,QCpBfY,EAAoBI,EAAKjB,IACxB,IAAIkB,EAASlB,GAAUA,EAAOmB,WAC7B,IAAOnB,EAAiB,QACxB,IAAM,EAEP,OADAa,EAAoBO,EAAEF,EAAQ,CAAEG,EAAGH,IAC5BA,GCLRL,EAAoBO,EAAI,CAACnB,EAASqB,KACjC,IAAI,IAAIC,KAAOD,EACXT,EAAoBW,EAAEF,EAAYC,KAASV,EAAoBW,EAAEvB,EAASsB,IAC5EE,OAAOC,eAAezB,EAASsB,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,MCJ3EV,EAAoBW,EAAI,CAACK,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,G,o2ECG3E,IAeMI,EAAb,yLACkB,mBADlB,YAfA,uB,IAAA,OAEI,aAAyC,MAAtBC,EAAsB,uDAAJ,GAAI,qBACrC,cAAMA,IAD+B,OAD3B,gBAC2B,EAAtBA,QAAAA,EAAsB,EAF7C,O,EAAA,G,EAAA,uBAKI,WACI,OAAIC,KAAKD,QACEC,KAAKC,KAAO,KAAOD,KAAKD,QAGxBC,KAAKC,U,iBAVxB,KAAkCC,SAmB3B,SAASC,EAAUnC,GACtB,GAAIA,MAAAA,EACA,MAAM,IAAI8B,EAEd,OAAO9B,E,+7BCZX,WAEI,IAAMoC,EAAOD,EAAOE,SAASC,cAAc,uBACrCC,EAAOJ,EAAOE,SAASC,cAAc,4BACrCE,EAAOL,EAAOE,SAASC,cAAc,uBAErCG,EAAWC,KAAKC,MAAM,IAAItB,OAAOuB,OAAOC,OAAOC,SAC/CC,EAAWL,KAAKC,MAAME,OAAOC,MAAP,UACtBE,EAAcP,EAAWM,EAE/BX,EAAK/B,MAAQoC,EAASQ,iBACtBV,EAAKLine truncated

hwe/scss/inheritPoint.scss

@@ -0,0 +1,23 @@
+#inheritance_list{
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.inherit_padding{
+    width: 33%;
+    padding: 10px 2px;
+}
+
+.inherit_item{
+    width: 33%;
+    padding: 10px 2px;
+}
+
+.col-form-label{
+    text-align:right;
+    padding-right:2ch;
+}
+
+.inherit_value{
+    text-align: right;
+}

hwe/ts/inheritPoint.ts

@@ -1,3 +1,5 @@
+import "../scss/inheritPoint.scss";
+
 import { sum } from "lodash";
 import { unwrap } from "./util";
 declare global {
@@ -35,4 +37,4 @@ function formStart() {
     }
 }
 
-window.formStart = formStart;
+formStart();

hwe/ts/shims-vue.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package.json

@@ -15,21 +15,30 @@
   "author": "Hide_D",
   "license": "MIT",
   "dependencies": {
-    "@types/lodash": "^4.14.172",
+    "core-js": "^3.16.1",
-    "lodash": "^4.17.21"
+    "lodash": "^4.17.21",
+    "vue": "^3.2.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.14.8",
     "@babel/core": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-typescript": "^7.15.0",
+    "@types/lodash": "^4.14.172",
     "@typescript-eslint/eslint-plugin": "^4.29.1",
     "@typescript-eslint/parser": "^4.29.1",
+    "@vue/compiler-sfc": "^3.2.2",
     "babel-loader": "^8.2.2",
     "babel-plugin-lodash": "^3.3.4",
+    "css-loader": "^6.2.0",
     "eslint": "^7.32.0",
+    "mini-css-extract-plugin": "^2.2.0",
     "pre-commit": "^1.2.2",
+    "sass": "^1.37.5",
+    "sass-loader": "^12.1.0",
+    "style-loader": "^3.2.1",
     "typescript": "^4.3.5",
+    "vue-loader": "^16.5.0",
     "webpack": "^5.49.0",
     "webpack-cli": "^4.7.2"
   },

src/sammo/WebUtil.php

@@ -103,6 +103,42 @@ class WebUtil
         return $decoded;
     }
 
+    public static function preloadCSS(string $path){
+        $upath = \phpUri::parse($path);
+        $path = $upath->join('');
+        if(!$upath->scheme && file_exists($upath->path)){
+            $mtime = filemtime($upath->path);
+            if($upath->query){
+                $tail = '&'.$mtime;
+            }
+            else{
+                $tail = '?'.$mtime;
+            }
+        }
+        else{
+            $tail = '';
+        }
+        return "<link href='{$path}{$tail}' rel='preload' as='style'>\n";
+    }
+
+    public static function preloadJS(string $path){
+        $upath = \phpUri::parse($path);
+        $path = $upath->join('');
+        if(!$upath->scheme && file_exists($upath->path)){
+            $mtime = filemtime($upath->path);
+            if($upath->query){
+                $tail = '&'.$mtime;
+            }
+            else{
+                $tail = '?'.$mtime;
+            }
+        }
+        else{
+            $tail = '';
+        }
+        return "<link href='{$path}{$tail}' rel='preload' as='script'>\n";
+    }
+
     public static function printJS(string $path){
         //async, defer 옵션 고려
         $upath = \phpUri::parse($path);

webpack.config.js

@@ -1,4 +1,6 @@
 const path = require('path');
+const { VueLoaderPlugin } = require('vue-loader');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 module.exports = [
     {
@@ -17,7 +19,7 @@ module.exports = [
         devtool: 'source-map',
         module: {
             rules: [{
-                test: /\.(ts|tsx)$/,
+                test: /\.(ts|tsx)$/i,
                 exclude: /(node_modules)/,
                 use: {
                     loader: 'babel-loader',
@@ -28,8 +30,33 @@ module.exports = [
                         ]
                     }
                 }
+            }, {
+                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",
+                ],
             }]
         },
+        plugins: [
+            new VueLoaderPlugin(),
+            new MiniCssExtractPlugin({
+                filename: '../css/[name].css'
+            })
+        ]
     },
     {
         name: 'gateway',
@@ -43,11 +70,11 @@ module.exports = [
             filename: '[name].js',
             path: path.resolve(__dirname, 'js'),
         },
-        mode: 'none',
+        mode: 'production',
         devtool: 'source-map',
         module: {
             rules: [{
-                test: /\.(ts|tsx)$/,
+                test: /\.(ts|tsx)$/i,
                 exclude: /(node_modules)/,
                 use: {
                     loader: 'babel-loader',
@@ -58,7 +85,33 @@ module.exports = [
                         ]
                     }
                 }
+            },
+            {
+                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",
+                ],
             }]
         },
+        plugins: [
+            new VueLoaderPlugin(),
+            new MiniCssExtractPlugin({
+                filename: '../css/[name].css'
+            }),
+        ]
     },
 ]