Webpack으로 Typescript React 설정해보기

 

 

package.json파일 생성

npm init -y

 

 

react, react-dom 설치 

npm install react react-dom

 

 

types/react types/react-dom 설치

npm install -D typescript @types/react @types/react-dom

 

타입스크립트는 컴파일러이므로 개발단계에서만 필요하므로 devdependencies에만 설정 

 

 

 

Webpack 설치 

npm i  -D webpack webpack-cli webpack-dev-server html-webpack-plugin

 

 

tsconfig.json파일 작성

{
  "compilerOptions": {

    "target": "es5" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
    "jsx": "react-jsx" /* Specify what JSX code is generated. */,
     /* Modules */
    "module": "es6" /* Specify what module code is generated. */,
    "moduleResolution": "node10" /* Specify how TypeScript looks up a file from a given module specifier. */,

    /* JavaScript Support */
    "allowJs": true /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */,
     /* Emit */
    "sourceMap": true /* Create source map files for emitted JavaScript files. */,
    "outDir": "./dist/" /* Specify an output folder for all emitted files. */,
    "allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */,
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,

    /* Type Checking */
    "strict": true /* Enable all strict type-checking options. */,
    "strictNullChecks": true /* When type checking, take into account 'null' and 'undefined'. */,

    /* Completeness */
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  },
  "include": ["./src/", "./typings"],
  "exclude": ["node_modules"]
}

 

webpack config.js파일 생성 

 

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: path.resolve(__dirname, "..", "./index.tsx"), //진입점
  output: {
    filename: "bundle.js", //번들 파일 이름
    path: path.resolve(__dirname, "..", "dist"), //번들파일 저장 경로
  },
  mode: "development",

  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
    //번들링할 확장자 설정. 순서대로 확인
  },
  module: {
    //번들링 할 때 플러그인 설정 가능
    rules: [
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: "file-loader",
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      //style-loader: style태그를 삽입해 dom에 css추가
      //css-loader: css 확장자의 css 파일을 읽기 위한 로더
      {
        test: /\.(tsx|ts|jsx|js)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: { presets: ["@babel/preset-env", "@babel/preset-react"] },
        },
      },
    ],
  },
  devServer: {
    liveReload: false,
    static: path.resolve(__dirname, "../"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "..", "./index.html"),
    }),
  ],
};

 

 

.babelrc 파일 작성 

{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ],
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ]
}

 

index.html

index.tsx

App.tsx

파일 각각 작성

 

 

plugin-transform-runtime 설치

npm i -D @babel/plugin-transform-runtime

 

추가 설치 

npm i -D @babel/preset-env @babel/preset-react

npm i -D @babel/preset-typescript

npm i -D babel-loader file-loader style-loader css-loader

 

package.json파일 수정

"start": "webpack server --config webpack/webpack.config.js --open"