이번에는 두개의 html로 각각 번들링을 하기 위한 예제이다.
[index.html, index.css, style.css, index.js, common.js]
[multiple.html, multiple.css, style.css, multiple.js, common.js]
위와 같은 묶음으로 번들링을 하도록 한다.
package.json의 내용은 위와 같다
webpack_multiple_template 디렉토리에서 "npm install --dev" 명령를 입력하여 모듈을 설치한다
index.html과 multiple.html에 공통으로 번들링될 style.css와 common.js 파일이다
common.js에는 exports로 모듈로 만들어서 index.js와 multiple.js에서 require로 로드하여 사용한다
index.html, index.css, index.js 파일이다
mutiple.html, mutiple.css, mutiple.js 파일이다
각 페이지에 맞춰 번들링 되로록 작성한 webpack.config.js 파일이다
module.exports의 entry는 단일 파일에 대한 번들링과 다르게 문자열이 아닌 객체로 선언되어 있으며 객체의 각 프로퍼티는 각각 번들링 하고자 하는 entry 파일의 경로이다
output 객체의 filename은 각 entry에 맞추어서 js를 묶어야 하기 때문에 예약어인 [name]을 사용하여 entry의 프로퍼티의 이름이 치환되도록 한다
다음은 plugins 배열에 HtmlWebpackPlugin 추가로 선언 해준다
chunks와 excludeChunks가 추가 되었는데 chunks는 entry에서 chunks에 있는 entry만 묶으라는 의미이며
excludeChunks는 entry에서 excludeChunks를 제외한 나머지 entry를 묶으라는 의미이다
ExtractTextPlugin을 이용하여 css들을 별도의 css파일로 번들링 하는데
위의 output 객체와 마찬가지로 예약어인 [name]을 사용하여 entry의 프로퍼티의 이름이 치환되도록 한다
webpack을 이용하여 번들링을 해준다
번들링한 결과는 dist 디렉토리에 저장된다
index.html 파일을 실행시켜 보면 index.css에 의해서 h1의 글씨가 빨간색으로 나타난다
번들링된 index.html은 index.css과 index.bundle.js를 로드하며
index.bundle.js는 common.js와 index.js가 번들링된 결과로 콘솔에 출력 결과를 통하여 확인이 가능하다
multiple.html 파일을 실행시켜 보면 multiple.css에 의해서 h1의 글씨가 파란색으로 나타난다
번들링된 multiple.html은 multiple.css과 multiple.bundle.js를 로드하며
multiple.bundle.js는 common.js와 multiple.js가 번들링된 결과로 콘솔에 출력 결과를 통하여 확인이 가능하다