const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');

const { PROJECT_NAME, BASE_DIR, SERVICE_STATUS } = require('./Global');

module.exports = {
  name: PROJECT_NAME,
  mode: SERVICE_STATUS,
  devtool: 'source-map',

  entry: {
    app: [`${BASE_DIR}/client/views/index.js`]
  },

  module: {
    rules: [{
      test: /\.vue?$/,
      loader: 'vue-loader',
    }, {
      test: /\.(js|jsx)?$/,
      loader: 'babel-loader',
    }, {
      test: /\.css$/,
      use: ['vue-style-loader', 'css-loader']
    },
    // {
    //   test: /\.(jpe?g|png|gif|svg|ttf|eot|woff|woff2)$/i,
    //   use: [{
    //     loader: 'url-loader',
    //     options: {
    //       limit: 8192,
    //       fallback: require.resolve('file-loader')
    //     }
    //   }]
    // }
    {
      test: /\.scss$/,
      use: [
        MiniCssExtractPlugin.loader,
        "css-loader",
        {
          loader: "sass-loader",
          options: {
            sassOptions: {
              includePaths: [path.resolve(__dirname, "client/resources/scss")],
            },
          },
        },
      ],
    },
    {
      test: /\.(jpe?g|png|gif|svg|ttf|eot|woff|woff2)$/i,
      type: 'asset/resource',
    },
    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: `${BASE_DIR}/client/views/index.html`,
    }),
    new VueLoaderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin({
      filename: "assets/css/[name].css",
    }),
  ],

  output: {
    path: `${BASE_DIR}/client/build`,	// __dirname: webpack.config.js 파일이 위치한 경로
    filename: 'bundle.js',
  },
}