Webpack

index.html을 이용해 개발 서버를 오픈하고 브라우저에서 내용을 확인하는 방법에 대해 정리를 해보았습니다.

webpack.config.js 기본 설정

module.exports = {
  entry: './js/main.js',  //진입점을 main.js로 설정

  output: {
    clean: true,
  }
}

1. 플러그인 설치

$ npm i -D html-webpack-plugin

2. webpack.config.js

2-1 플러그인 가져오기

설치가 끝나면 webpack.config.js 파일로 이동하여 설치한 플러그인을 가져옵니다.

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

2-2 플러그인 실행할 곳 명시하기

plugins에는 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정해줄 수 있습니다.

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

plugins: [
  new HtmlPlugin({
    template: './index.html'
    })
]

• output 아래에 plugins라는 구성 옵션을 만들어 배열 데이터를 하나 할당합니다.
• 배열의 첫 번째 아이템으로 생성자 함수처럼 변수로 지정했던 HtmlPlugin을 실행시켜줍니다. new HTMLPlugin()
  • new HTMLPlugin()을 통해 어떠한 값이 반환되면, 반환된 결과가 플러그인의 첫번째 배열의 아이템으로 사용되게 됩니다.
  • 생성자함수의 옵션으로 객체데이터를 이용해 template에 상대경로로 index.html 파일을 명시해주시면 됩니다. (루트경로에 만들어놓은 index.html을 지칭하는 경로가 됩니다.)

webpack이 entry에 있는 main.js 파일을 읽어들이고 output 옵션을 통해 만들어내게 됩니다. 이과정에서 plugins에 명시되어 있는 플러그인들을 활용하게 됩니다. 결국 template에 명시된 index.html과 main.js파일의 병합본을 만들어 dist폴더에 내어내게 되는 것입니다.

3. devServer옵션

npm run dev를 통해 개발서버를 오픈했을 때 정상적으로 개발 서버가 작동하는 경우도 있으나, localhost에 들어갈 장소가 ::라고 표시되는 오류가 발생할 수 있습니다.

이를 해결하기 위해서는 webpack.config.js 파일에서 아래와 같이 개발 서버의 호스트를 코딩해주시면 됩니다.

devServer: {
    host: 'localhost'
  }

4. 개발 서버 오픈

$ npm run dev