webpack ts, sass, img loader 설정

 

필요한 패키지

npm i css-loader sass sass-loader style-loader file-loader url-loader ts-loader typescript

 

 

이미지는 url loader와 file loader를 사용한다.

 

url loader, 파일을 base64로 인코딩하여 번들링파일에 포함된다. 

file loader, 파일을 output 경로로 복사해준다.

 

용량이 적은 파일은 url loader를 사용하고 용량이 큰 파일은 fallback으로 file loader를 사용하는게 좋다.

 

 

 

tsconfig.json 설정

{
  "compilerOptions": {
  ...생략
    "typeRoots": ["node_modules/@types", "types"] //타입폴더위치 
    "outDir": "./dist" //출력경로
  }
}

 

//  ./types/image.d.ts

declare module "*.png";
declare module "*.jpg";
declare module "*.jpeg";

확장자명 타입지정 반드시 tsconfig로 설정한 경로에 만들어야한다.

 

 

프로젝트 파일구조 예시

 

 

 

webpack.config.js 전체코드

 

module.rules의 use는 배열의 가장 뒤 index부터 순차적으로 실행(순서가 중요!)

 

sass/scss의 경우 

sass-loader => css-loader => style-loader 순으로 실행된다.

 

*style-loader는 css코드는 html/head에 css코드를 입력시켜준다.

module.exports = (option) => {

  return {
    mode: "development",
    entry: "./index.ts",
    output: {
      filename: "bundle.js",
      path: path.resolve(__dirname, "dist"), //절대경로로 입력
      //에러를 방지하기 위해 tsconfig.json output path와 일치해야한다.
      publicPath: "/dist/", //출력되는 경로
    },
    devtool: "inline-source-map",
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: "ts-loader",
          //tsconfig가 있음으로 추가구성 configuration을 명시하지 않아도 된다.
          exclude: /node_modules/,
        },
        // Sass 파일 로더 설정
        {
          test: /\.s[ac]ss$/,
          use: [ "style-loader", "css-loader", "sass-loader",],
        },
        // 이미지 파일 로더
        {
          test: /\.(png|jpe?g|gif|svg|webp)$/,
          use: [
            {
              loader: "url-loader",
              options: {
                name: "[name].[ext]", //name: 파일명, ext: 확장자
                limit: 10000, //10k까지 url-loader
                fallback: "file-loader", //이후 file-loader
              },
            },
          ],
        },
      ],
    },
    resolve: {
      extensions: [".ts", ".js"], //생략가능한 확장자 명칭
    },
    devServer: {
      static: { directory: path.resolve(__dirname) },
      compress: true,
      port: 3000,
    },
    plugins: [],
  };
};

 

package.json 예시

{
  "name": "myproject",
  "version": "1.0.0",
  "main": "index.ts",
  "scripts": {
    "start": "webpack server",
    "build": "webpack --config webpack.config.prod.js"
  },
  "dependencies": {
    "css-loader": "^6.7.3",
    "file-loader": "^6.2.0",
    "sass": "^1.58.3",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.4.2",
    "typescript": "^4.9.5",
    "url-loader": "^4.1.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  }
}

 

//index.ts 예시

import "./index.scss";  //scss 파일 import
import image from "./public/image.png"; //image파일 import

console.log(image);

 

빌드후 파일구조

빌드를 하고 나서 dist 폴더에 bundle.js 와 import한 png가 들어있는 것을 확인 할 수 있다.

 

 

---

 

참고

 

DevServer | webpack

 

[Webpack] file-loader와 url-loader 비교 차이점 정리

 

tsx에 이미지 추가할 때 오류 해결 방법 [TypeScript]

 

 

[Project] webpack resolve 설정으로 절대경로 및 확장자 관리하기