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>

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