webpack은 모듈 번들러
// 번들 파일이 2개 생성된다.
// 보통 멀티페이지에서 entry를 여러개 사용한다.
{
entry: {
app: '파일 경로',
zero: '파일 경로',
}
}
// 하나의 entry에 여러파일들을 넣고 싶을때는 배열사용
{
entry: {
app: ['a.js', 'b.js'],
},
}
또한 JS파일 대신 npm모듈들을 넣어도 됩니다. 보통 @babel/polyfil이나 eventsource-polyfill 같은 것들을 적용할 때 다음과 같이 합니다.
// 리액트에서 자주 사용하는 entry
{
entry: {
vendor: ['@babel/polyfill', 'eventsource-polyfill', 'react', 'react-dom'],
app: ['@babel/polyfill', 'eventsource-polyfill', './client.js'],
},
}
{
output: {
path: '/dist',
filename: '[name].js',
publicPath: '/',
},
}
path와 publicPath의 차이는 path는 output으로 나올 파일이 저장될 경로입니다. publicPath는 파일들이 위치할 서버상의 경로입니다.
filename을 보면 [name].js 이렇게 되있는데 이렇게 해야 entry에서 지정한 이름으로 생성된다.
다른 옵션으로는 [hash]나 [chunkhash]가 있습니다. [hash]는 매 번 웹팩 컴파일시 랜덤한 문자열을 붙여 줍니다. 따라서 캐시 삭제시 유용합니다. [chunkhash]는 파일이 달라질 때에만 랜덤 값이 바뀝니다. 이것을 사용하면 변경되지 않은 파일들은 계속 캐싱하고 변경된 파일만 새로 불러올 수 있습니다.