우선 디렉토리 구조이다
src 디렉토리의 app.js, index.html, color.css, layout.css 이 네가지 파일을 번들링 하려고 한다
모듈들을 간단하게 설치 하기 위하여 package.json 파일을 사용하도록 한다.
개발에 필요한 모듈은 devDependencies에 등록되어 있으며 해당 모듈을 설치 하기 위하여 "npm install --dev"를 입력한다.
설치가 정상적으로 완료 되면 결과가 트리 구조로 타나난다
이제 각 파일의 내용이다
src/app.js에는 번들링할 css 파일을 선언해준다
css의 결과를 나타낼 간단한 html 파일이다
하나의 파일로 번들링할 두개의 css 파일이다
webpack.config.js에서 module에서 css에 대한 rule의 loader와
아래 plugins에서 ExtractTextPlugin이 정의 되어 있는데
module중 css에 대한 rule의 loader를 사용하지 않고 주석처리된 use 옵션을 사용하고
plugins에서 ExtractTextPlugin을 사용하지 않으면 css는 적용이 되나 별도의 css파일로 번들링 되지 않고
번들링된 html 파일에 인라인 방식으로 스타일이 적용되어 진다
그렇게 번들링이 된다면 html 파일이 너무 복잡해지므로
ExtractTextPlugin을 사용하여 별도의 css 파일로 번들링 하도록 한다
webpack_css 디렉토리에서 webpack 명령어를 입력하여 번들링한다
번들링이 완료 되고 나면 dist 디렉토리와 함께 app.bundle.js, index.html, style.css 파일이 생성 되어 있다
index.html 파일을 웹 브라우저로 실행시켜 보면 위와 같이 스타일이 적용되어 있다
또한 개발자 도구로 확인하여 보면 우리가 작성하였던 color.css, layout.css가 아닌 style.css 파일이 index.html에 링크 되어 있으며
app.bundle.js 파일도 올바르게 로드되어서 console창에 결과를 확인 할 수 있다