file loader 설정

모듈 내에서 import또는 require로 파일을 모듈로 읽어들이기 위한 loader이다.

file loader는 build 시 webpack에서 설정된 Output 디렉토리로 파일을 복사한다.

 

file loader 설정

yarn add file-loader -D

webpack에서 image파일에 대한 설정을 하기위해 module의 rules에 새로운 원소를 추가해야 된다.

module.exports = {
    ...,
    module: {
        rules: [
            ...,
            {
                test: /\.(png|jpe?g|gif|tif?f|raw|bmp)$/i,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[contenthash].[ext]'
                    }
                }]
            },
            ...
        ]
    },
    ....
}

test에 image파일의 확장자를 정의하는 정규표현식을 작성하고 use에 file-loader를 사용한다는 정의를 한다. 그리고 image파일에 대한 hash를 정의하기 위해 contenthash를 사용한다. ext는 확장자의 약어

그리고 js에 이미지 파일을 import하여 사용하도록 코드를 수정 후 프로젝트를 빌드하면 dist폴더 내 image파일이 생성된다.

여기서 dist파일 내 정적 파일을 따로 묶어주는 작업을 할것이다.

위에 작성한 file-loader에 대한 설정에서 pubilcPath, outputPath를 정의해주면 된다.

module.exports = {
    ...,
    module: {
        rules: [
            ...,
            {
                test: /\.(png|jpe?g|gif|tif?f|raw|bmp)$/i,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[contenthash].[ext]',
                        pubilcPath: 'assets/',
                        outputPath: 'assets/'
                    }
                }]
            },
            ...
        ]
    },
    ....
}

그럼 dist파일 내 assets폴더가 생성된다.

pubilcPath는 loader뿐만 아니라 webpack어디에서도 사용될 수 있는 공용key이다.

publicPath는 파일의 경로를 가져오는 url을 추가적으로 설정하는 부분이다.

https://webpack.kr/guides/public-path/

Public Path | 웹팩

outputPath는 build 후 파일이 생성되는 경로를 설정해준다.

 

파일을 production모드에서는 hashing된 경로를 사용하고 그렇지 않을 때 파일 원본의 이름을 사용하도록 설정할 것이다.

위에서 설정한 options에서 함수로 작성하여 분기처리를 할 수 있다.

webpack 문서 예시

공식문서와 비슷한 모양으로 설정했다.

const isProduction = process.env.NODE_ENV === 'PRODUCTION';

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

production 모드가 아니면 원본의 경로, production모드일대는 hashing된 경로를 사용할 것이며 development모드로 시작을 하면 아래의 사진처럼 원본 경로를 따른다.

dev모드 원본 경로를 따른다.

prod모드 파일명이 hashing처리 되어 나온다.