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>
2021-08-14 05:47:16 +09:00
1 parent dd52766449
commit f1252fa4e2
@@ -5,10 +5,15 @@
            {
                "targets": {
                    "browsers": [
-                        "last 2 versions"
+                        [
+                            "last 2 versions",
+                            "ie >= 11"
+                        ]
                    ]
                },
-                "modules":false
+                "useBuiltIns": "usage",
+                "corejs": 3,
+                "modules": false
            }
        ]
    ],
@@ -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>
@@ -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*/
@@ -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":""}
@@ -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
@@ -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
@@ -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;
+}
@@ -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();
@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
@@ -15,21 +15,30 @@
  "author": "Hide_D",
  "license": "MIT",
  "dependencies": {
-    "@types/lodash": "^4.14.172",
-    "lodash": "^4.17.21"
+    "core-js": "^3.16.1",
+    "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"
  },
@@ -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);
@@ -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'
+            }),
+        ]
    },
 ]
				`@@ -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":""}