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>

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{
-    display: flex;
-    flex-wrap: wrap;
-}
+#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}
 
-.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;
-}
+/*# sourceMappingURL=inheritPoint.css.map*/

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
+}