22-05-03 Webpack

$ npm init -y
(이전에는 npm i -D parcel-bundler)
$ npm i -D webpack webpack-cli webpack-dev-server@next
package.json파일 열기

"scripts": {
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },

index.html, main.js 수정
webpack.config.js파일 생성

//import
const path = require('path')

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

  // 결과물(번들)을 반환하는 설정
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  }
}

$ npm run build

output: {
    path: path.resolve(__dirname, 'public'), //전역변수,절대경로
    filename: 'main.js',
    clean: true,   //필요하지 않은 이전 생성파일 삭제
  },

output: {
    // path: path.resolve(__dirname, 'dist'), //기본적으로 dist폴더생성
    // filename: 'main.js',  //entry와 같은 파일 이름
    clean: true,
  },

---

03.plugins

$ npm i -D html-webpack-plugin
webpack.config.js파일열기

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

output: {
    // path: path.resolve(__dirname, 'dist'),
    // filename: 'main.js',
    clean: true,
  },

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

$ npm run dev

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

  devServer: {
    host: 'localhost',
  },

npm run dev