Bundler(plugins)

plugins

dist폴더에 index.html 파일을 삽입해서 개발서버를 열어주는 방법

1. npm i -D html-webpack-plugin 패키지 설치

2. webpack.config.js 파일에 html-webpack-plugin 불러오기

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

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

  // 결과물(번들)을 반환하는 설정
  output: {
    // __dirname: 현재 파일이 있는 그 경로를 나타내는 하는 node.js의 전역적인 변수
    // resolve: __dirname와 dist 폴더를 합쳐서 절대적인 경로를 제공
    // path: path.resolve(__dirname, 'dist'),
    // filename: 'main.js',

    // 구성옵션을 바꿨을 때 전에 만들어 놓은 파일이 자동으로 제거됨
    clean: true  // Clean the output directory before emit.
  },

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

3. 개발서버 열기 npm run dev