search

5. 이미지 파일 모듈로 다루어보기(file-loader)

  • Intro

    • 웹팩은 대부분의 리소스들을 모듈로 다룬다.

    • css, js 파일 뿐만아니라 이미지파일과 같은 정적인 파일또한 모듈로 다룰 수 있다.

    • 다양한 모듈을 해석하기 위해 loader가 필요 (file-loader, url-loader)

  • file-loader

    • 모듈내에서 import나 require로 사용하고자 하는 file을 모듈로 읽어들일 수 있도록 하는 loader

    • file-loader로 읽은 파일의 경우, build시 output dir경로로 파일을 카피해오는 역할

    • 실습

      • file-loader 설치

        npm i file-loader -D

      • webpack.common.js rules 키에 추가. (file-loader는 개발, 배포용 모두 사용되기 때문에 common에서 작성)

        module.exports = {
    module: {
        rules: [
            {
                //svg확장자는 url-loader에서 다룰 예정
                //i의의미: 대소문자 구분 X
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            // ext: 확장자 약어
                            name: '[contenthash].[ext]',
                        },
                    },
                ],
            },
        ],
    },
};

      • index.js 에서 file import 해오기

        import cuteImg from './images/cute.png';

const imgElement = document.createElement('img');
imgElement.src = cuteImg;

    • 결과확인

      • npm start: 이미지 tag내부에 contenthash가 붙여진 src가 들어가짐

      • npm run build: dist 폴더 내부에 이미지 파일 생성됨.

      • 단, image와 같은 정적 리소스는 한 파일에서 관리하고 싶음.

      • file-loader에 대한 설정을 더 추가.

      • 그전에 모듈들을 관리할 폴더(src) 생성후, index.js, index.css, assets폴더 src 폴더로 이동

      • entry위치가 src 아래로 변경되었기 때문에, webpack.common.js에서 해당 엔트리 수정

        module.exports = {
    entry: './src/index.js',
};

    • 파일로더를 통해 빌드를 했을 때, 이미지 파일들이 assets 폴더 내부에 생성되도록 수정하기(2가지)

      • 파일을 참조하는 url정보에 assets 경로가 추가되어야함

      • file-loader로 읽어들인 모듈들이 dist 폴더안에 맞바로 생성되는 것이 아니라, 그 내부에 assets 폴더안에 생성되게끔 수정.

        • file-loader options에 추가

          publicPath: 'assets/',
outputPath: 'assets/'

    • 개발모드일때와 배포모드일때를 분기처리하기

      • 기존에 key에 해당하는 값을 문자열과 객체형태로 작성하여 프로퍼티를 전달 했었는데

        이번에는 프로퍼티를 함수형태로 전달해볼 것.

      • 함수에 전달되는 매개변수의 경우, loader의 종류별로 상이하기 때문에 해당 공식문서를 확인하고 사용할 것.

      • 실습환경에서는 isProduction에 process.env.NODE_ENV === 'PRODUCTION' 에 대한 boolean값을 저장하고 있어서 해당 식별자로 작성

      • 나머지는 file-loader github문서 참조

        module.exports = {
module: {
    rules: [
        {
            test: /\.(png|jpe?g|gif)$/i,
            loader: 'file-loader',
            options: {
                name() {
                    if (!isProduction) {
                        return '[path][name].[ext]';
                    }
                    return '[contenthash].[ext]';
                },
            },
        },
    ],
},
};

  • 실습용 image 자료는 src/images/ 하위에 관리중

  • dist/assets/아래 build결과 나오는 이미지 파일 관리중.

    • npm run build를 하면 dist/assets/내부에 contenthash값이 적용된 파일이 생성되어있음

Previous4. Mode(Development mode & Production Mode)Next6. 이미지 파일 모듈로 다루어보기(url-loader)

Last updated