타입스크립트로 상태관리를 통해 SPA를 만들기 전 기본적인 환경설정을 했다.

자주 쓰일 것 같아서 기본적인 세팅 후 보일러 플레이트 레포를 따로 파서 올려두었다.

https://github.com/somedaycode/vanila-state-boilerplate

웹팩 설정 중몰랐던 부분들을 다시 정리해본다.

웹팩

resolve

웹팩 설정을 하다보면 이렇게 resolve라는 속성을

module.exports = { 요 안에다가 } 넣는다.

설정하면서 이것이 정말 뭐하는 건지 찾아봤다.

  resolve: {
    alias: {
      "@src": path.resolve(__dirname, "src"),
      "@public": path.resolve(__dirname, "public")
    },
    extensions: [".ts", ".js"]
  },

resolve는 모듈 해석에 대한 설정을 할 수 있다.

먼저 alias를 보면 모듈들에 대한 별칭을 만들어서 사용할 수 있게금 도와준다.

extensions는 import할 때 확장자를 생략 할 수 있도록 한다.

• 앞에서부터 순서대로 해석한다.
• 여러 파일에서 이름이 동일하지만 다른 확장자를 가진 경우, webpack은 배열의 앞에서부터 파일을 해석하고 남은 것은 해석하지 않는다. - 웹팩 공식홈페이지 참고

// alias, extensions 설정 후
import Something @src/somthing

devServer

  devServer: {
    host: "localhost",
    port: process.env.PORT || 3000,
    open: true,
    historyApiFallback: true
  },

open

웹팩 데브서버가 실행되면 크롬이 즉시 실행된다.

historyApiFallback

history API 사용 중 404를 받게 된다면 index.html로 리다이렉트 해준다.

plugins

plugins: [
  new HtmlWebpackPlugin({
    template: './public/index.html',
    hash: true,
  }),
];

HtmlWebpackPlugin

hash를 왜 true로 설정하나 궁금했는데, 이 글을 참고했다.

프론트엔드 개발환경의 이해: 웹팩(기본)