웹팩 주요 속성 - output

entry는 진입점 output은 결과물이라고 생각하면 된다.
output 속성은 웹팩을 돌리고 난 결과물의 파일 경로를 의미한다.

// webpack.config.js
module.exports = {
    output: {
        filename: 'bundle.js'
    }
}

앞에서 배운 entry 속성과는 다르게 객체 형태로 옵션들을 추가해야된다.

output 속성 옵션 형태

최소한 filename은 지정해줘야 하며 일반적으로 아래와 같이 path 속성을 함께 정의한다.

// webpack.config.js
var path = require('path');

module.exports = {
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist')
    }
}

여기서 filename 속성은 웹팩으로 빌드한 파일의 이름을 의미하고, path 속성은 해당 파일의 경로를 의미한다.
그리고 path 속성에서 사용된 path.resolve() 코드는 인자로 넘어온 경로들을 조합하여 유효한 파일 경로를 만들어주는 Node.js API이다.
이 API가 하는 역할을 좀 더 이해하기 쉽게 표현하면 아래와 같다.

// webpack.config.js
var path = require('path');

module.exports = {
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist') // = './dist/bundle.js'
    }
}

output 파일 이름 옵션

filename 속성에 여러가지 옵션을 넣을 수 있다.

결과 파일 이름에 entry 속성을 포함하는 옵션

module.exports = {
    output: {
        filename: '[name].bundle.js'
    }
}

결과 파일 이름에 웹팩 내부적으로 사용하는 모듈 ID를 포함하는 옵션

module.exports = {
    output: {
        filename: '[id].bundle.js'
    }
}

매 빌드시마다 고유 해시 값을 붙이는 옵션

module.exports = {   
    output: {
        filename: '[name].[hash].bundle.js'
    }
}

웹팩의 각 모듈 내용을 기준으로 생성된 해시값을 붙이는 옵션

module.exports = {
    output: {
        filename: '[chunkhash].bundle.js'
    }
}

이렇게 생성된 결과 파일의 이름에는 각각 엔트리 이름, 모듈 아이디, 해시 값 등이 포함된다.

항상 bundle.js로 변환이되면 내부의 파일 내용과 관계 없이 브라우저 캐싱 때문에 이전 파일을 화면에 뿌려주기 때문에 이를 강제 새로고침해야되는, 캐시를 비워줘야되는 상황이 생긴다.

따라서 내용이 변환되었을 때는 chunkhash 같은 구분 값을 줘서 이 파일이 변화가 되었다는 것을 인식시키면서 사용자가 강제 새로고침을 안해도 결과물을 잘 확인할 수 있게끔 하는 그런 전략이라고 보면 된다.

LHJ

웹팩 주요 속성 - output