vue, scss 초기 구성

.babelrc

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

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/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 {

package.json

@@ -15,21 +15,31 @@
   "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": "^15.9.8",
+    "vue-style-loader": "^4.1.3",
     "webpack": "^5.49.0",
     "webpack-cli": "^4.7.2"
   },

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'
+            }),
+        ]
     },
 ]