"dev": "webpack-dev-server --mode development", // --mode development 는 현재 개발 모드를 의미한다.
"build" : "webpack --mode production" // --mode production 는 제품모드

// import
// nodejs 환경에서는 import가 아닌, require을 통해서 import 한다.
const path = require('path')

// export
module.exports = {
  // parcel index.html <- parcel 번들러의 진입점을 index.html으로 설정한다는 말
  // entry는 파일을 읽어들이기 시작하는 진입점 설정
  entry:'./js/main.js',   // main.js를 진입점으로 설정

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

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

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

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

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

  // 결과물(번들)을 반환하는 설정
  output:{
    // path:path.resolve(__dirname,'dist'),
    // filename:'main.js',
    clean:true
  },
  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
  plugins:[
    new HtmlPlugin({
      template:'./index.html'
    })
  ]
}

const CopyPlugin = require('copy-webpack-plugin')
module.exports = {
  
  //// 생략

  plugins:[
    new HtmlPlugin({
      template:'./index.html'
    }),
    // 새로운 배열 데이터를 생성로 CopyPlugin 생성자를 생성
    // static 안의 내용이 CopyPlugin을 통해 복사가 돼서 dist라는 폴더로 이동
    new CopyPlugin({
      patterns:[
        // static 폴더
        {from:'static'}
      ]
    })
  ],
}

use:[
  'style-loader',
  'css-loader',
  'postcss-loader',
  'sass-loader'
]

  "browerslist":[
    "> 1%",
    "last 2 versions"
  ]

// export
module.exports={
  preset:['@babel/preset-env'],
  plugins:[
    '@babel/plugin-transform-runtime'
  ]
}

 {
  test:/\.js$/,
  use:[
    'babel-loader'
  ]
}