Webpack - etc.

♣ Devtool & Source Map

-  Source Map  : 브라우저에서 디버깅할 때 번들된 코드가 아닌 원본 코드를 확인할 수 있게 해주는 기능 

-  Devtool : SourceMap의 기능 생성을 제어하는 설정 값

 

module.exports = {
devtool: 'source-map',

}

좌 : devtool 옵션 미 작성 / 우 : devtool 옵션 source-map 작성

물론 내가 작성한 코드들이 매우 간단해서 사실 크게 헷갈리지 않지만 코드가 많다는 가정이라면 왼쪽처럼 번들링 된 코드는 알아보기 힘들 수 있다. 그래서 devtool을 사용해서 sourceMap(원본과 번들파일과연결)이 생성된다면 오른쪽과 같이 원본코드를 볼 수 있고 디버깅하는 게 훨씬 수훨해질 것이다.

 

webpack에서 소스맵을 사용하는 경우는 많은 옵션이 존재한다. 나는 그중에 'source-map'을 임의로 사용해 본 것뿐 상황에 맞게 확인 후 사용하면 될 것으로 보인다.

🔗devtool옵션값제공문서

♣ Babel Loader 

- ES6이상의 자바스크립트코드는 구버전 브라우저에서 지원이 안되는 경우가 있어서 ES5이하의 코드로 트렌스파일링(코드변환)하도록 하는 기능의 바벨을 사용하게 되는데 webpack을 통해 번들링을 할 때도 바벨으르 사용할 수 있도록 하는 것이 바로 babel-loader이고 사용방식은 아래와 같다.

1. 설치

npm i -D babel-loader @babel/core @babel/preset-env

 

2. webpack.config.js 설정

module.exports = {
 module: {
    rules: [
      {
        test: /\.js$/, // 어떤 파일을 변경할껀지
        exclude: /node_modules/, // 모듈에 있는건 제외시켜야해서 작성
        use: {//어떤 걸 사용할껀지
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },

}

 

3. build 했을 때 오류가 안나면 적용 완료!

♣ Resource Asset 

- asset의 종류는 font, image 등이 있는데 image를 기준으로 알아보도록 하겠습니다.!

다른 설정 없이 js에서 image를 경로에 맞게 import 한다면 오류가 발생합니다.

<div class="image">
          <img id="mainImage" alt="main image " />
</div>

import mainImage from './assets/dog.jpg';
const img = document.getElementById('mainImage');
img.src = mainImage;

파일 유형을 처리하기 위한 구성된 로더가 없다는 에러가 발생! 추가적인 로더를 적용할 수 있지만

webpack5부터는 asset 타입이 기본적으로 제공되는 게 있어서 loader까지 사용을 할 필요는 없다.

타입	설명
asset/resource	파일을 개별 파일로 내보냄 (기본적으로 file-loader와 유사)
asset/inline	파일을 Data URL(base64)로 변환해서 번들에 포함 (url-loader와 유사)
asset/source	파일을 문자열로 변환해서 번들에 포함 (raw-loader와 유사)
asset	Webpack이 자동으로 resource 또는 inline 중 적절한 방식을 선택

 

1. webpack.config.js 작성

 - output에 asset의 이름을 지정해주지 않으면? 첫 번째 사진처럼 이상한 이름으로 지정돼서 나오기 때문에 기존 파일명과 동일하게 진행하기 위해선 output에 설정 값을 해주는 게 중요하다

module.exports = {
 output: {
    assetModuleFilename: '[name][ext]', // 추가
  },
 module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/,
        type: 'asset/resource',
      },
    ],
  },

}

이상 없이 이미지가 적용되었다!