Webpack config

• 처음으로 cra 를 사용하지 않고 프로젝트를 만들어 진행해 보고 있는데, 짧은 감상은 하나부터 열까지 다 직접 세팅해야 하는것이다..

• 번거로울수 있지만 어찌보면 나의 입맛에 맞게 프로젝트를 구성할 수 있고, 이런 공부를 할 수 있어서 좋은것 같다. 솔직히 좀 답답하긴 하지만 나름 재미있다..!

scss 세팅

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
 See https://webpack.js.org/concepts#loaders

라는 에러 발생.

cra가 아닌 webpack으로 만든 환경에선 css나 scss를 사용하기위해 추가로 설정 필요.

yarn add style-loader css-loader sass-loader node-sass -D

webpack.config.js 에

rules :[
      {
        test: /\.scss$/,
        use: [
          "style-loader", // creates style nodes from JS strings
          "css-loader", // translates CSS into CommonJS
          "sass-loader" // compiles Sass to CSS, using Node Sass by default
        ],
      }
]

를 추가해 준다.

favicon

• HTMLWebpackPlugin 사용
  
  HTMLWebpackPlugin 문서를 보면, 이와같은 항목이 있다.

webpack.config.js

plugins: [
  new HtmlWebpackPlugin({
    template: 'public/index.html',
    favicon: 'src/assets/images/logo.png', << 이부분을 추가해준다.
  }),
]

그리고 build를 해주면 index.html 에 favicon 링크 태그가 추가된 것을 확인할 수 있다.

webpack으로 만든 typescript프로젝트에서 image파일 세팅

1. file-loader 모듈 설치

yarn add file-loader -D

2. scss/css 세팅때와 동일하게 webpack.config.js 의 rules 를 추가해준다.

rules :[
{
          test: /\.(png|jpe?g|gif|svg)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[path][name].[hash].[ext]',
              },
            },
          ],
        },
]

3. scss 타입 정의시에 사용했던 d.ts 파일에 아래를 추가해 타입정의를 해준다.

declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'

절대경로 설정하기

• 다른 폴더에 있는 컴포넌트를 임포트 하려 했으나, 절대경로를 읽어내지 못하는 에러가 발생하였다.
  이전에 cra로 만들어진 프로젝트는 저절로 절대경로 임포트가 되었었는데, webpack으로 만든 이 프로젝트는 절대경로를 불러올시 src가 앞에 붙고 심지어 그것도 에러를 내며 임포트가 되지 않았다.

1. webpack.config.js 의 resolve 옵션 변경해주기

//webpack.config.js

   resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'), 
      },
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    },

src 부분을 @로 앨리어싱 해주고, extensions에 저렇게 선언함으로써 확장자를 떼어줄 수 있다.

2. tsconfig.json 변경

{
  "compilerOptions": {
  	...
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    ...
  },
  "include": ["src"]
}

baseUrl은 최상단 경로를 의미하고 paths에 절대 경로 @와 그 아래 파일이라는 /* 를 명시해주고 그것과 매칭되는 주소를 배열안에 위와 같이 명시해준다. 그리고 include를 통해 src디렉토리를 포함시켜 준다.