[Webpack] - plugins

개요

현재 dist폴더에는 main.js파일 밖에 없는데 여기에 index.html 파일을 삽입해서 개발 서버 오픈하고자 함

plugins 패키지 설치

$ npm i -D html-webpack-plugin

패키지 가져오기

plugins 구성 옵션 추가

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

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

webpack.config.js 파일 전체 코드

// import
// nodeJS 환경에서 언제든지 가져와서 사용할 수 있는 path라는 전역 모듈
const path = require('path');
const HtmlPlugin = require('html-webpack-plugin');

// export
module.exports = {
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: './js/main.js',

  // 결과물(번들)을 반환하는 설정
  output: {
    path: path.resolve(__dirname, 'dist'), // __dirname 경로와, dist 폴더를 합쳐서 절대적 경로를 path에 제공
    filename: 'main.js',
    clean: true, // 기존에 만든 내용 제거
  },

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

웹팩이 entry로 시작해서 main.js를 읽어들여서 그것에 대한 결과를 output 옵션으로 만들어 내는데, 만들어내는 과정에서 plugins라는 옵션에 명시 되어있는 여러 플러그인들을 활용하게 된다.

결국, index.html와 결과물을 만들어내는 main.js에 병합된 합본을 만들어서 dist 폴더에 만들어 주는 역할을 하게 된다.

개발 서버 실행해서 확인해보기

$ npm run dev

로컬 호스트 주소가 이상하게 나온다면 아래 코드를 추가해주면 된다.

// webpack.config.js
devServer: {
    host: 'localhost',
  },