const { VueLoaderPlugin } = require("vue-loader");

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

module.exports = {
  name: PROJECT_NAME,
  mode: SERVICE_STATUS,
  devtool: 'eval',

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

  module: {
    rules: [{
      test: /\.vue?$/,
      loader: 'vue-loader',
    }, {
      test: /\.(js|jsx)?$/,
      loader: 'babel-loader',
      options: {
        compact: true,
      },
    }, {
      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: /\.(ts|tsx)$/,
      exclude: /node_modules/,
      loader: 'ts-loader',
      options: { appendTsSuffixTo: [/\.vue$/] }
    }],
  },

  plugins: [new VueLoaderPlugin()],

  resolve: {
    //확장자를 순서대로 해석, 여러 파일에서 이름이 동일하지만 다른 확장자를 가진 경우, webpack은 배열의 앞에서부터 파일을 해석하고 남은 것은 해석하지 않음
    //import 시, 확장자 생략 가능
    extensions: [ '.tsx', '.ts', '.jsx', '.js', '.vue', 'json' ],
  },

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