plugins

webpack 번들러를 통해 개발 서버 오픈을 하기 위해 필요한 플러그인을 설치하는 시간을 가져봅시다.

1. 플러그인 설치

$ npm i -D html-webpack-plugin

터미널 명령어를 통해 플러그인을 설치해줍니다.

2. 플러그인 가져오기

const HtmlPlugin = require('html-webpack-plugin')

webpack.config.js 파일로 이동하여 설치한 플러그인을 가져오도록 합니다.

3. 플러그인 실행할 곳 명시하기

const HtmlPlugin = require('html-webpack-plugin')

// 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
plugins: [
  new HtmlPlugin({
    template: '.index.html'
    })
]

plugins라는 구성 옵션에 배열 데이터를 하나 만들어줍니다. 이 안에 생성자 함수를 통해 변수로 지정했던 HtmlPlugin을 코딩하고 template으로 index.html 파일을 명시해주시면 됩니다.

이를 통해, webpack이 entry에 있는 js 파일을 읽어들이고 output 옵션을 통해 만들어진 결과물이 그 과정에서 plugins에 있는 플러그인들을 활용하게 됩니다.

4. 개발 서버 오픈

$ npm run dev

터미널 명렁어를 통해 개발 서버를 오픈해줍니다.

5. devServer

정상적으로 개발 서버가 작동하는 경우도 있으나, 위와 같이 localhost에 들어갈 장소가 ::라고 표시되는 오류가 발생할 수 있습니다. 이를 해결하기 위해서는 webpack.config.js 파일에서 아래와 같이 개발 서버의 호스트를 코딩해주시면 됩니다.

devServer: {
    host: 'localhost'
  }