Bundler[Webpack] - plugins

01.plugins이란?

• webpack 번들러를 통해 개발 서버 오픈을 하기 위해 필요한 패키지
  웹 브라우저의 표준 기능을 확장해 주는 프로그램을 의미합니다.

02.플러그인 설치 & 확인

$ npm i -D html-webpack-plugin

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

package.json 파일

"devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.0.0-rc.1"
  }

03.플러그인 가져오기

webpack.config.js 파일

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

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

04.플러그인 설정

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

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

webpack.config.js 파일

// import
const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");

// export 
module.exports = {
  // parcel index.html
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: "./js/main.js",
  // 결과물(번들)을 반환하는 설정
  output: {
    // path: path.resolve(__dirname, "dist"), // dist의 절대경로를 반환
    // filename: "main.js",
    clean: true
  },

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

• plugins라는 구성 옵션에 배열 데이터를 하나 만들어줍니다.
• 이 안에 생성자 함수를 통해 변수로 지정했던 HtmlPlugin을 코딩하고 template으로 index.html 파일을 명시해주시면 됩니다.
• 이를 통해 webpack이 entry에 있는 js 파일을 읽어들이고 output 옵션을 통해 만들어진 결과물이 plugins에 있는 플러그인들을 활용하게 됩니다.

05.개발 서버 오픈

$ npm run dev

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

06.devServer

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

webpack.config.js 파일

// import
const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");

// export 
module.exports = {
  // parcel index.html
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: "./js/main.js",
  // 결과물(번들)을 반환하는 설정
  output: {
    // path: path.resolve(__dirname, "dist"), // dist의 절대경로를 반환
    // filename: "main.js",
    clean: true
  },

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