참고자료

Webpack으로 React 시작하기

---

1. 의존성 패키지 설치

npm i -D @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/preset-typescript @types/babel__core @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-loader compression-webpack-plugin fork-ts-checker-webpack-plugin html-webpack-plugin ts-loader tsconfig-paths-webpack-plugin webpack webpack-bundle-analyzer webpack-cli

---

2. config 파일 작성

/webpack.config.js

/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-disable @typescript-eslint/no-var-requires */
const path = require("path");
const webpack = require("webpack");

// .env
const dotenv = require("dotenv");

// 웹팩에서 html을 파싱하기 위함.
const HtmlWebpackPlugin = require("html-webpack-plugin");

// tsconfig에서 baseUrl을 받아오기 위함
const TsConfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

// gzip
const CompressionPlugin = require("compression-webpack-plugin");

// 번들 점유 용량 확인
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

// Typescript(타입스크립트)를 빌드할 때 성능을 향상시키기 위한 플러그인를 불러오기
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");

// uglify
const TerserPlugin = require("terser-webpack-plugin");

dotenv.config();

module.exports = {
  entry: {
    // 번들 파일(bundle)의 시작 파일(Entry)을 jsx에서 tsx로 변경
    "js/app": ["./src/index.tsx"],
  },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/",
    filename: "build.[chunkhash].js",
  },
  resolve: {
    plugins: [new TsConfigPathsPlugin()],
    extensions: [".ts", ".tsx", ".js", ".json"],
  },
  module: {
    rules: [
      // Webpack(웹팩)에서 Typescript(타입스크립트)를 사용하기 위해 js|jsx를 ts|tsx로 수정 후 ts-loader를 추가
      // ts-loader의 옵션은 성능 향상을 위해서
      {
        test: /\.(ts|tsx)$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              plugins: ["@babel/transform-runtime"],
            },
          },
          {
            loader: "ts-loader",
            options: {
              transpileOnly: true,
            },
          },
        ],
        exclude: /node_modules/,
      },
      // css, scss loader 설정
      {
        test: /\.(s*)css$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  // proxy 설정
  devServer: {
    historyApiFallback: true,
    proxy: {
      "/api": "http://localhost:5000",
    },
  },
  // uglify
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  plugins: [
    // 기본 html 위치 설정.
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "index.html",
    }),
    // Typescript(타입스크립트)의 컴파일 속도 향상을 위한 플러그인을 설정
    new ForkTsCheckerWebpackPlugin(),
    // new BundleAnalyzerPlugin(),
    // gzip (압축)
    new CompressionPlugin({
      algorithm: "gzip",
    }),

    // env 변수 사용을 위한 플러그인
    new webpack.DefinePlugin({
      "process.env.REACT_APP_S3_ACCESS_KEY": JSON.stringify(
        process.env.REACT_APP_S3_ACCESS_KEY,
      ),
      "process.env.REACT_APP_S3_SECRET_ACCESS_KEY": JSON.stringify(
        process.env.REACT_APP_S3_SECRET_ACCESS_KEY,
      ),
    }),
  ],
};

---

/tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "moduleResolution": "node",
    "noResolve": false,
    "noImplicitAny": false,
    "removeComments": false,
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "keyofStringsOnly": true,
    "baseUrl": "./src",
  },
  "typeRoots": ["node_modules/@types", "src/@type"],
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts",
    "./node_modules/**/*"
  ],
  "include": ["./src/**/*", "@type"]
 }

package.json

  "scripts": {
    "start": "webpack-dev-server --mode development --hot --open",
    "debug": "webpack server --mode devleopment --display-error-details",
    "build": "webpack --progress"
  }

---

3. issues

tsconfig.json의 baseUrl 참조

baseUrl이 "./src"로 설정되어있어 React 파일에서 /component와 같은 방식으로 참조 가능.

webpack config에서 resolve 옵션에 아래와 같이 설정해주어야.

// webpack.config.js
const TsConfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
.
.
.
  resolve: {
      plugins: [new TsConfigPathsPlugin()],
      extensions: [".ts", ".tsx", ".js", ".json"],
  },

---

css 관련 오류

// webpack.config.js
module: {
    rules: [
			{
			  test: /\.(s*)css$/,
			  use: ["style-loader", "css-loader", "sass-loader"],
			},
		]
}

---

Routing 오류

오류: Cannot get /{route}

// webpack.config.js
devServer: {
    historyApiFallback: true,
},

---

proxy 설정

// webpack.config.js
proxy: {
  "/api": "http://localhost:5000",
},

Async / Await regenerated is not defined

[React] regeneratorRuntime is not defined 에러 해결

---

process is not defined

bundle.js:4387 Uncaught ReferenceError: process is not defined

[JS][WebPack] WebPack에서 환경변수 사용하기

---

nginx gzip 설정

http {
	.
    .
    .
    gzip on;
    gzip_min_length 10240;
    gzip_buffers 32 32k;
    gzip_comp_level 6;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_vary on;
}

4. eslint, prettier

npm i -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-prettier prettier

이외 설정

1. vscode extension
   
   

2. vscode config