웹팩 초기 설정을 끝내고 코드를 작성하며 css 모듈 파일과 이미지 파일을 import 하려고 했더니 모듈을 찾을 수 없다는 오류가 났다. 찾아보니 import 구문은 자바스크립트 파일만 가져올 수 있어서 다른 종류의 파일을 import 하기 위해선 해당 파일들을 자바스크립트로 변환하는 전처리 과정이 필요하다고 했다. 이전에 웹팩에 대해 찾아보면서 웹팩은 자바스크립트와 JSON 파일만 이해한다고 했던 말이 바로 이 뜻이었구나..! CRA를 사용하지 않고 웹팩을 커스텀하여 프로젝트 세팅을 하게되니 내 생각보다 더 많은 부분들을 직접 하나하나 설정해주어야 했다. CRA로 프로젝트를 진행했을 땐 이런것까지 설정을 해주는 줄 모르고 당연하게 사용했었는데 생각보다 더 많은 것을 설정해주고 있었나보다.
아무튼 웹팩을 사용할 때 css 파일과 이미지 파일을 import 할 수 있게 하기 위해서는 그에 맞는 로더를 설치해서 설정해주어야한다.
CSS 파일 로드하기
css 파일을 로드하기 위해서는 css-loader와 style-loader를 설치해주어야 한다.
npm install --save-dev css-loader style-loader
그리고 webpack.config.js 파일에 모듈을 사용할 수 있도록 module 속성 안에 로더 설정을 적어주면 된다.
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: ["babel-loader", "ts-loader"],
},
// css-loader, style-loader 설정 추가
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
]
}그런데 여기까지만 하면
Cannot find module '(파일 경로)' or its corresponding type declarations.이런 오류가 난다.
이 오류는 타입스크립트와 관련한 오류이다. 타입스크립트가 자바스크립트 외의 파일들의 파일 유형을 이해하지 못하는 것이다. 그래서 타입스크립트가 다른 파일 유형들을 어떻게 처리해야 하는지 알려주어야 한다.
- index.d.ts 파일을 생성한다. (모듈 타입 정의를 위한 파일)
- index.d.ts 파일 안에 특정 확장자를 모듈로 처리하라고 지시하는 코드를 적어준다.
declare module "*.css";이렇게 index.d.ts 파일까지 작성하고 나면 css 파일을 오류 없이 import 해줄 수 있다.
이미지 파일 로드하기
이미지 파일들을 로드하려면 file-loader를 사용해도 되는데, webpack 5부터는 asset modules를 사용하여 별도의 로더 설치 없이 asset 파일(이미지, 폰트 등)을 쓸수 있다고 해서 asset modules를 사용했다.
적용 방법은 간단하다. webpack.config.js 파일의 module 속성 안에 asset modules 설정을 추가하면 된다.
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: ["babel-loader", "ts-loader"],
},
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
// asset modules 설정 추가
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
type: "asset/resource",
},
],
},그리고 타입스크립트가 이미지 파일들을 모듈로 처리할 수 있도록 index.d.ts 파일에 모듈 타입 정의를 해준다.
declare module "*.css";
// 이미지 파일 모듈 타입 정의 추가
declare module "*.jpg";
declare module "*.png";
declare module "*.jpeg";
declare module "*.gif";
declare module "*.svg";이렇게 해주면 이미지 파일들까지 import 할 수 있게 된다!
