Merge pull request #6 from kimyouknow/develop-FE

[Build] 개발환경 세팅

FE/.eslintrc.json

@@ -0,0 +1,60 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "airbnb-typescript",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:import/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "project": "./tsconfig.json"
+  },
+  "plugins": ["react", "import", "@typescript-eslint"],
+  "rules": {
+    "prettier/prettier": ["error", {}, { "usePrettierrc": true }],
+    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
+    "no-undef": "off",
+    "@typescript-eslint/no-var-require": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "import/no-unresolved": "off",
+    "no-use-before-define": ["error", { "functions": false }],
+    "react/react-in-jsx-scope": "off",
+    "import/order": [
+      "error",
+      {
+        "groups": ["builtin", "external", ["parent", "sibling"], "index"],
+        "pathGroups": [
+          {
+            "pattern": "@/**",
+            "group": "external",
+            "position": "after"
+          }
+        ],
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        },
+        "newlines-between": "always"
+      }
+    ]
+  },
+  "settings": {
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "typescript": {}
+    }
+  }
+}

FE/.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+/dist

FE/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "useTabs": false,
+  "printWidth": 100,
+  "arrowParens": "avoid",
+  "trailingComma": "all"
+}

FE/babel.config.json

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    ["@babel/preset-react", { "runtime": "automatic" }],
+    [
+      "@babel/preset-env",
+      { "targets": "> 0.25%, not dead", "modules": false, "useBuiltIns": "usage", "corejs": 3 }
+    ],
+    "@babel/preset-typescript"
+  ]
+}

FE/config/webpack.common.js

@@ -0,0 +1,27 @@
+const path = require('path');
+
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+
+module.exports = {
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, '../src'),
+    },
+    extensions: ['.js', '.jsx', '.ts', '.tsx', '.css'],
+  },
+  entry: `${path.resolve(__dirname, '../src')}/index.tsx`,
+  module: {
+    rules: [],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: `${path.resolve(__dirname, '../public')}/index.html`,
+    }),
+    new webpack.ProvidePlugin({ React: 'react' }),
+    new ReactRefreshWebpackPlugin(),
+    // new BundleAnalyzerPlugin(),
+  ],
+};

FE/config/webpack.development.js

@@ -0,0 +1,33 @@
+const { merge } = require('webpack-merge');
+
+const common = require('./webpack.common');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'inline-source-map',
+  devServer: {
+    open: false,
+    hot: true,
+    compress: true,
+    port: 3000,
+    historyApiFallback: true,
+    liveReload: true,
+  },
+  output: {
+    filename: '[name].[contenthash].js',
+    publicPath: '/',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx|js|jsx)$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.(sa|sc|c)ss$/i,
+        use: ['style-loader', 'css-loader', 'file-loader'],
+      },
+    ],
+  },
+});

FE/config/webpack.production.js

@@ -0,0 +1,47 @@
+const path = require('path');
+
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const { merge } = require('webpack-merge');
+
+const common = require('./webpack.common');
+
+module.exports = merge(common, {
+  mode: 'production',
+  devtool: 'cheap-module-source-map',
+  output: {
+    filename: '[name].[contenthash].js',
+    path: path.resolve(__dirname, '../dist'),
+    publicPath: '/',
+    clean: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx|js|jsx)$/,
+        use: 'babel-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.(sa|sc|c)ss$/i,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+      },
+    ],
+  },
+  plugins: [new MiniCssExtractPlugin()],
+  optimization: {
+    usedExports: true,
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({ terserOptions: { compress: { drop_console: true } } }),
+      new CssMinimizerPlugin(),
+    ],
+    splitChunks: { chunks: 'all' },
+  },
+  performance: {
+    hints: false,
+    maxEntrypointSize: 512000,
+    maxAssetSize: 512000,
+  },
+});