[VanillaJS로 블로그 만들기] 1. Typescript + webpack 세팅

이번에 개인 프로젝트로 경험삼아 VanillaJS로 개인블로그를 만들어보기로 했다.

나름 그래도 프론트엔드 개발자인데 블로그 정도는 내가 스스로 만들어야되지않을까하는 마음과 이참에 Web API를 공부해보자하는 마음으로 시작하게 되었다.

급하게 결과물을 내려고하기보다는 각 단계별로 정확하게 알고 넘어가고자한다.

우선적으로 Webpack + Typescript 세팅을 하고, absolute path import를 하기 위한 추가적인 세팅을 해주었다.

// tsconfig.json
{
  "compilerOptions": {
    "outDir": "./public/",
    "noImplicitAny": true,
    "sourceMap": true,
    "module": "es6",
    "target": "es5",
    "strict": false,
    "baseUrl": ".", // https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
    "paths": {
      // paths are resolved relative to baseUrl
      "@web/*": ["./src/*"]
    }
  },
  "include": ["./src/**/*"]
}

먼저 아무 세팅을 하지 않은 상태에서 VS Code에서 절대경로를 입력하면 당연히 에디터는 알지 못하기 때문에 빨간 밑줄을 열심히 긋는다.

tsconfig에 저렇게 paths를 세팅해주면 더 이상 빨간줄이 생기지 않을 것이다. 여기서 주의깊게 봐야될 부분은 baseUrl과 paths인데, paths는 baseUrl을 root로 동작한다.

나는 @web이라는 접두어를 붙여 절대경로를 사용할 것이기 때문에 alias를 그렇게 설정해준 것을 볼 수 있다.

//webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'index.js',
  },
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
      { enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' },
      { enforce: 'pre', test: /\.ts$/, loader: 'tslint-loader' },
    ],
  },
  resolve: {
    // https://webpack.js.org/configuration/resolve/#resolve-alias
    alias: {
      '@web': path.resolve(__dirname, './src/'),
    },
    extensions: ['.ts', '.js', '.json'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      inject: false,
    }),
  ],
}

이제 더이상 에디터에는 에러가 발생하지 않지만 그렇다고 해서 webpack이 @web을 알아듣는 것은 아니다. webpack에도 alias를 추가해준다.

자세한 설명은 각각의 공식 레퍼런스 링크를 참고!