「WebPack 개발」 2 html페이지 생성

"「WebPack 개발」 1 웹펙 세팅 & 웹서버 실행" 포스팅에서 'localhost:8081/main.js' 웹 호스팅을 실행시켰다. 그러나 테스트를 진행하려면 결과를 쉽게 볼 수 있는 index.html페이지가 필요하다.

 

 

 

---

1] 'html-webpack-plugin' 설정

'html-webpack-plugin'모듈을 설치했다면, public폴더에 있는 .html파일을 실행할 수 있다.  

 

webpack.config.js파일에서 htmlWebpackPlugin모듈을 불러온 뒤, plugins값을 아래처럼 설정한다.

ecommerce/product/webpack.config.js

 

new HtmlWebpackPlugin()은 빌드 과정에서 public폴더에 있는 .html파일을 연결시켜주는 역할을 한다.

 

 

 

 

 

---

2] 'index.html' 생성

public폴더를 생성한 후, (테스트 목적)간략한 index.html을 추가한다.

ecommerce/product/public/index.html

 

웹팩을 실행해보자. 

 

 

html웹펙 플러그인이 작동하며 8081포트에서 'public/index.html'파일이 실행된다.

 

localhost:8081

 

그리고 웹팩 빌드를 통해 생성된 main.js파일 역시 실행된다는 것을 알 수 있다.

 

ecommerce/product/src/main.js 실행

 

 

실제 'npm run build'를 통해 build만 실행했을 때, 아래와 같이 main.js가 담긴 'dist'폴더를 볼 수 있다. 

 

npm run build 실행 시//

 

웹팩은 dist폴더에서 생성된 main.js파일을 public/index.html파일에 삽입함으로써 클라이언트는 'product/src'아래에 있는 실행파일을 볼 수 있다.

 

 

 

 

 

---

3] element 전달

'src'폴더의 index.js파일에서 html파일을 연결하는 방식은 기존의 방식과 같다.(플러그인 x)

html 요소에 id 혹은 class를 추가하여 index.js파일에서 이용할 수 있다. 

 

id 추가

 

html에서 추가한 'dev-products' id 내부에 faker로 생성된 임의 db를 넣어준다.

 

 

다시 빌드를 실행해보자.

 

아래와 같이 faker가 생성한 db데이터가 'dev-products' ID내부에 삽입된 것을 확인할 수 있다.

 

localhost:8081 실행

 

이렇게 웹팩을 활용한다면, 무거운 js프레임워크를 사용하지 않고 웹서버를 쉽게 생성할 수 있다.