Webpack의 플러그인의 도입

포스트의 코드입니다.

DogPawDev/webpack-example

---

웹팩에는 두가지 형태의 확장기능이 있습니다.

 

1. 로더
1. 최종적인 아웃풋( npx webpack 명령어로 나오는 index_bundle.js) 으로 가는 과정에 사용되는 기능
2. 플러그인
1. 만들어진 최종적인 결과물을 변형하는 기능 (해당 포스트에서 사용하는 플러그인은 index_bundle.js를 index.html 코드안에 넣어줍니다. )

 

플러그인이 조금 더 자유로운 일들을 할 수 있습니다.

 

로더는 어떤 모듈을 처리하고 또다른 로더에게 넘기고 넘기고 최종적인 아웃풋을 만드는 느낌이지만

 

플러그인은 각각의 플러그인 마다 기능이 제각각이고 따로 동작합니다. 

 

Plugins | webpack

다음 문서에서 여러 플러그인들을 확인할 수 있습니다,

 

예제로 살펴볼 플러그인은 많은 플러그인들 중 하나인 htmlWebpackplugin 입니다.

 

 

npm install -D html-webpack-plugin

 

설치 후에 지금까지 만든 html 파일들을 source 디렉토리로 이동시킵니다.

 

그리고 각 파일안에 들어있는 번들러를 로딩하는 코드를 삭제를 합니다.

삭제

여기 2개의 html 파일을 템플릿으로 이용해 webpack으로 번들링을 해서 public 에 최종 완성된 html을 만들어보고자 합니다.

 

플러그인도 로더와 마찬가지로 webpack 설정 파일을 이용합니다.

 

모듈을 불러오고 플러그인에 넣어줍니다.

플러그인은 로더와 다르게 모듈을 불러오는 작업이 필요합니다.

 

Public 폴더 안에 내용을 삭제하고 실행을 해봅니다.

 npx webpack

Public 폴더안에 번들링된 js와 index.html 파일이 생성된 것을 볼 수 있습니다.

 

다음과 같이 스크립트도 자동으로 넣어서 생성이 됩니다.

 

그런데 포스트에서 작성한 index.html 파일을 토대로 만든 것이 아니라 쌩뚱맞은 형태의 index.html 파일이 생성이 됩니다.

 

이는 플러그인 설정에서 어떤 html 파일을 참고해서 만들지 값을 주지 않았기 때문에 해당 플러그인(htmlWebpackplugin)이 기본적으로 만들도록 설정된 html을 만든 것 입니다.

 

다음과 같이 사용자가 작성한 index.html 을 토대로 파일을 생성하기 위해서는 설정을 넣어줘야 합니다.

웹팩 설정 파일입니다.

해당 객체에 인자값을 넣어주면 됩니다.

 

Template 은 무엇을 토대로 만들것인지

 

Filename은 최종 결과 이름을 무엇으로 할 것인지

 

미리 만들어진 탬플릿을 토대로 결과물이 만들어 졌습니다!

npx webpack으로으로 확인을 해보면 이전과 다르게 지정한 탬플릿으로 만들어진 것을 확인 할 수 있습니다.

 

그런데 문제가 아직 있습니다. Index.html 파일에 about_bundle.js가 들어가 있습니다.

 

index.html 과 about.html 서로 다른 JS 파일을 사용하는데 index.html 파일안에 about_bundle.js 파일도 존재하는 것 입니다.

 

이를 해결하기 위해 cunks 라는 기능을 사용합니다.

Chunks 의 값은 entry 에 있는 이름으로 넣어줘야 합니다 .

 

실행해보면 정상적으로 들어간 것을 확인 할 수 있습니다.

 

이 플러그인 말고도 다양한 플러그인들이 있습니다. 각 필요한 플러그인들을 찾아서 적용하면 됩니다.