[toy blog service] Webpack, TypeScript와 React(Babel은 천천히!)

Webpack이란? 

[core concepts]

 

Webpack은 "Static Module Bundler for modern javascript applications" 이다. 웹팩이 앱을 처리할때 내부적으로 dependency graph를 그린다. 버전 4부터는 configuration 파일이 꼭필요한것은 아니지만, 원하면 configuration파일을 통해서 customizing할 수 있다. 

 

핵심적인 컨셉은 아래와 같다. 

 

• Entry
  • Entry point는 웹팩이 어디서부터 dependency graph를 그릴지 알려주는 것이다. 웹팩은 여기서부터, 이 entry파일이 어떤 파일들에 의존하고 있는지 파악한다. (default는 src/index.js) 
• Output
  • 번들파일을 어디로 나오게 하면되는지 저장하는 것이다(default는 ./dist/main.js). public과 같은 다른 경로로 바꿀수있다. 
• Loaders
  • Webpack은 JavaScript랑 Json파일만 이해한다. Loaders는 기타 파일도 webpack이 유효한 모듈로써 dependency graph에 포함될 수 있도록 하기 위해서 필요하다. 
  • Loaders는 두가지 property가 필요하다. 
    • test: 어떤 파일인지 test: /\.txt$/ 이런식으로
    • use: 어떤 loader로 transform을 할지
    • 이두가지를 통해서 해당 타입을 만나면 웹팩 컴파일러에게 아래 동작을 하라고 하는 것이다
      • 웹팩 컴파일러야, '.txt' 파일을 require() / import 구문에서 만나면, raw-loader를 통해서 이를 transform하고 번들에 집어 넣어
• Plugins
  • Loader는 특정한 타입의 모듈을 transform하는 용이라면 plugin은 넓은 범위의 태스크를 하는 용도이다(번들 크기 최적화와 같은)
  • Plugin을 사용하려면 require를 통해서 포함시켜야한다. 
  • 그중에 html-webpack-plugin번들파일을 포함한 html파일을 생성해준다. 
• Mode
  • production 모드인지 development모드인지를 설정하는 곳이다. 
• Browser Compatibility
  • 웹팩은 ES5를 지원하는 모든 브라우저를 지원한다. 이는 import(), require.ensure()에서 Promise를 사용하기 때문이다. 더오래된 브라우저를 지원하려면 polyfill을 사용해야한다. 
• Webpack Dev Server: 
  • webpack-dev-server를 통해서 쉽게 devserver를 열수 있다. 

 

 

TypeScript를 어떻게 사용할 수 있을까?(공식문서에 나와있는 Babel없이 사용하는 방식)

[webpack docs]

[typescript - tsconfig docs]

 

- ts-loader

ts-loader를 사용해서 TypeScript 파일을 webpack에서 지원할 수 있다. ts-loader는 내부적으로 tsc(typescript compiler)를 사용하고 있다. 그렇기때문에 tsconfig.json 설정에 의존한다. tsconfig.json에서 모듈은 commonJS를 사용하면 안된다. CommonJs로 설정하면 tree-shaking을 못하기 때문. 

 

Transpile을 위해 Babel-loader를 이미 사용하고 있다면 @babel/preset-typescript 를 사용할 수 있다. 이를 통해서 Babel이 JavaScript랑 TypeScript를 둘다 다루도록 해도 된다. 여기서 주의해야할 것은 ts-loader랑은 다르게, 이 내부에 있는 @babel/plugin-transfor-typescript 플러그인의 경우 타입체킹은 하지않는다고 한다

 

tsconfig.json내에서 sourceMap설정을 사용할 수 있다. 

 

- @types/html-webpack-plugin 

 

- 오류 관련: medium.com/@hyunalee419/react-typescript-typescript-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-b0543f6e3e5

 

 

 

react, react-dom

[react typescript cheatsheet]

 

TypeScript에서 사용하려면 아래를 설치해야한다.

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

 

 

결과

아래는 TypeScript 기반의 React프로젝트의 webpack.config.js파일과 tsconfig.json파일이다. 

 

- tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "esnext",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "sourceMap": true,
    "isolatedModules": true
  }
}

 

- webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin"); //installed via npm
const webpack = require("webpack"); //to access built-in plugins
const path = require("path");
module.exports = {
  mode: "development",
  entry: "./src/index.tsx",
  devtool: "source-map",
  module: {
  // ts-loader를 사용
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  // html을 만들어주는 플러그인
  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
  // devserver(dist)안에 있는 파일을 띄워준다. 그리고 hot-reloading도 된다
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000,
  },
};

 

 

 

 

Babel이란?(나중에)

바벨은 일단 Transpiler인데 이번에는 TypeScript 로 js로 트랜스파일해보고 나중에 문제가 있거나 하면 이를 사용해보려고 한다. 

babeljs.io/docs/en/babel-preset-react

Babel · The compiler for next generation JavaScript

 

 

후기

여러번 webpack을 설정해보고 삽질을 한적이 있는데, 이번에 다시하니까 조금더 알것 같다. 실제로 설정을 해보면서 공식문서를 찬찬히 다시 읽었는데 문서가 진짜 잘 쓰여있구나, 싶다. 이번에 패키지를 한번 만들어보기위해서 간단한것을 만들려고 하는데 프로젝트 세팅에서 많은것을 배운것 같다. 아마 하다보면 문제가 많을거긴한데, react 기반의 컴포넌트를 만들어서 외부에서 사용할 수 있도록 하는 것이 목표라 이렇게 구성하는 것이 맞을것 같은데, 아마 나중에 보면 잘못 구성한 것일수도 있다. 그래도 webpack자체가 어떤지 좀더 알수 잇게 되었고, 특히 TypeScript랑 어떻게 연동할지 잘몰라서 머리가 아팠는데 문서에 잘 쓰여있어서 대만족이었다!