const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const isDevelopment = process.env.SERVE;

const plugins = [new CleanWebpackPlugin()];

if (isDevelopment) {
  // react -element를 별도로 만드는 것이므로 개발 모드에서만 htmlplugin, refresh plugin 사용
  plugins.push(
    new ReactRefreshWebpackPlugin(),
    new HtmlWebpackPlugin({ template: "./src/index.html" })
  );
}

module.exports = {
  plugins,
};

const path = require("path");
// const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -> css를 별도로 추출할 예정이 없으므로 임의 삭제
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
const tsConfigPath = path.resolve(__dirname, "./tsconfig.json");
const ReactRefreshTypeScript = require("react-refresh-typescript");
const plugins = [new CleanWebpackPlugin()];
const isDevelopment = process.env.SERVE;
let mode = "development";
let target = "web";

if (process.env.NODE_ENV === "production") {
  mode = "production";
  target = "browserslist";
}

if (isDevelopment) {
  // react -element를 별도로 만드는 것이므로 개발 모드에서만 htmlplugin, refresh plugin 사용
  plugins.push(
    new ReactRefreshWebpackPlugin(),
    new HtmlWebpackPlugin({ template: "./src/index.html" })
  );
}

module.exports = {
  mode: mode, // 웹팩에서의 default모드는 해당 설정과 같이 해주지 않으면 default로 production이다.
  entry: "./src/index.tsx",
  output: {
    path: path.resolve(__dirname, "dist"), // 깔끔한 웹팩 플러그인(clean-webpack-plugin)을 위해서는 output이  필요하다
    filename: "test.js",
    assetModuleFilename: "images/[hash][ext][query]",
    // 모든 이미지들을 dist/images 하위 폴더로 넣기 위함  + 이미지가 변경될 시 브라우저 캐싱으로 인해 못알아차리는 경우가 있으므로 hash를 넣어주자
  },

  module: {
    rules: [
      {
        test: /\.(s[ac]|c)ss$/i,
        use: [
          //웹팩 로더는 한 파일에 대해 여러가지가 실행되는데 배열의 뒤에서부터 앞으로 작동한다.
          "style-loader", // js로 생성된 css를 styles 노드로 생성
          "css-loader", // css 를 js로
          // 'postcss-loader' //css파일 따로 extract하지 않을 것이므로 제외,
          "sass-loader", // sass -> css로 컴파일
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: "asset", //웹팩 5부터 url-loader, file-loader를 대신할 수 있게 되며 asset으로 설정 시 자동으로 base64로 컴파일(인라인번들 base 64, <= 8kb)하든지 images폴더로 넣어주든지 하게 해준다
        /**
         * 큰 사이즈의 파일을 인라이닝 하고 싶으면 limit을 정해줄 수 도 있다 하단 parser 참고
         */
        parser: {
          dataUrlCondition: {
            maxSize: 30 * 1024,
          },
        },
      },
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "ts-loader",
            options: {
              getCustomTransformers: () => ({
                before: [isDevelopment && ReactRefreshTypeScript()].filter(
                  Boolean
                ),
              }),
              transpileOnly: isDevelopment,
            },
          },
        ],
      },
      // 모든 '.js' 출력 파일은 'source-map-loader'에서 다시 처리한 소스 맵에서 존재.
      //dev setting일 시 변경되는 사항을 map을 통해서 빠르게 찾게 되는 것 + 이전 빌드 결과 존재시 더 빠른 build 가능
      {
        test: [/\.js?$/, /\.ts?$/, /\.jsx?$/, /\.tsx?$/],
        enforce: "pre",
        exclude: /node_modules/,
        use: ["source-map-loader"],
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          //추가 설정 없으면 babelrc.를 참조하게 되어있다
          //여기서는 개발모드일때와 빌드모드일때를 구분하기 위해 로직이 필요(react-refresh/babel)하므로 bable.config.js를 사용한다
          loader: "babel-loader",
          options: {
            cacheDirectory: true, //바벨이 recompile하는데 쓰이는 큰용량의 소스를 줄여줌
            presets: [
              "@babel/preset-env",
              // in files only using JSX, -> TSX는 해당이 안되는것.. 같음
              ["@babel/preset-react", { runtime: "automatic" }], // Runtime automatic with React 17+ allows not importing React
            ],
            //하단 플러그인은 react-refresh-typescript에서 변경되는 ts를 바벨로더(js를 변환하는 용도이므로)가 못읽는 현상이 발생하기 때문
            plugins: [isDevelopment && "react-refresh/babel"],
          },
        },
      },
    ],
  },
  plugins: plugins,
  target: target,
  // Webpack의 출력물에서 디버깅을 하기위해 소스 맵 사용
  devtool: "source-map",
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
    plugins: [
      //ts를 위한 추가 플러그인 설정
      new TsconfigPathsPlugin({
        configFile: tsConfigPath,
      }),
    ],
  },

  //dev server 세팅
  devServer: {
    static: "./dist", //웹팩5부터 static으로 명칭 변경
    port: 3000,
    hot: true,
  },
};