[React 기초] Webpack 설치 및 실행 : 4탄 - HTML Plugin 설치

지금까지 공부한 웹팩 설치 방법으로 인하여 React 기본 구문으로 만들어 본 구구단 게임을 웹팩으로 시도해 볼 시간이었는데 공부가 더 필요한 사항이 생겼습니다. 최종 배포시 전체 웹팩 파일을 배포할 수도 없는 일이기에 배포는 dist폴더만 배포하면 되는데 이 폴더에는 웹팩을 통하여 하나로 합쳐진 JS파일만 존재합니다. 

이제 dist폴더에 배포용으로 만들어지는 HTML을 만들기 위해서 역시 HTML Plugin이 필요합니다. 

 

본 내용은 제로초 TV와 코딩앙마의 프론트엔드 개발 강좌를 기본으로 React와 JavaScript 웹팩을 동시에 공부하면서 자신의 것으로 정리한 내용입니다.

 

▒ HTML 웹펙 플러그인 설치

 

이제는 조금 감이 올 것으로 보여지네요. 지금부터는 자바스크립트 웹팩과 React 웹팩을 구분하여 공부하는 편이 나을듯 합니다. 사실 같은 파일에 webpack.config.js를 두가지 버전으로 정리를 하면 마지막에 정리된 코드 중심으로 움직이기 때문에 하나의 파일로 웹팩을 만든 연습용 파일을 두개의 파일로 나누어서 관리를 할 필요가 있습니다. 

 

이 부분은 각자 숙제로 넘기고 이 글의 주된 주제는 React이기에 React용 웹팩으로 약간 수정하여 HTML 웹팩 플러그인을 설치하도록 하겠습니다. 

 

Node로 HTML 플러그인을 설치하고 webpack.config.js에서 설정하는 순서로 기억하면 되겠네요. 

 

1. HTML Plugin 설치

 

npm을 사용하여 HTML Plugin을 설치합니다. 

 

 

설치가 완료되면 항상 package.json에 반영이 되어 있는지 확인이 필요합니다. 

 

 

 

2. webpack.config.js 설정

 

이제는 webpack.config.js 파일로 다음과 같이 설정합니다. 

 

 

위 그림은 먼저 설치한 html-webpack-plugin을 불러오기 위해 require함수를 사용하는 과정이며 module설정에 plugins 배열을 만들어 HtmlWebpackPlaugin을 설정합니다. template이 되는 기본 HTML 파일은 처음 만들어 놓았던 index.html 파일입니다. 

 

그럼 입력되는 파일은 client.jsx이고 app.js가 dist폴더에 출력되는 파일입니다. 그리고 root 에 참조되는 index.html은 다음과 같이 되어 있어야 하구요. 

 

 

 

3. 웹팩 실행

 

이제 웹팩을 실행(npm run build)해 봅니다. 에러없이 웹팩이 실행된 것을 볼 수 있습니다. 

 

 

 

dist폴더에는 index.html과 app.js 두 파일이 만들어진 것을 볼 수 있습니다. 

 

 

이제는 만들어진 파일이 최종 완성본이면 dist폴더에 있는 두파일만 배포하면 되고 구체적 프로그램 콘텐츠는 외부에서는 볼 수 없겠지요.