[Webpack 이란]

[설치]

// Webpack V4는 webpack-cli를 요구한다
$ npm install --save-dev webpack webpack-cli

$ npm install --save-dev babel-loader

{
  "name": "es6-project",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack -w"
		// 스크립트 수정, babel cli를 직접 안써도 webpack에서 이용해서 트랜스파일링 해서 번들링
  },
  "devDependencies": {
    "@babel/cli": "^7.4.4", // webpack으로 번들시에는 필요없음
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "babel-loader": "^8.0.6",
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2"
  }
}

[Javascirpt 번들링 설정]

const path = require('path');

module.exports = {
  // enntry file, 의존성 체크 시작점
  entry: './src/js/main.js',
  // 컴파일 + 번들링된 js 파일이 저장될 경로와 이름 지정
  output: {
    path: path.resolve(__dirname, 'dist/js'),
    filename: 'bundle.js'
  },
  module: {
    rules: [ // 안에 오브젝트 만들어서 확장자별 설정가능
      {
        test: /\\.js$/,
        include: [ // 번들링 할 폴더
          path.resolve(__dirname, 'src/js')
        ],
        exclude: /node_modules/, // 번들링 제외 폴더
        use: {
          loader: 'babel-loader',
          options: { // .babelrc 나 babel.config.js에서 설정했으면 안해도된다
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-proposal-class-properties']
          }
        }
      }
    ]
  },
  devtool: 'source-map',
  // <https://webpack.js.org/concepts/mode/#mode-development>
  mode: 'development'
};

<!DOCTYPE html>
<html>
<body>
  <script src="./dist/js/bundle.js"></script>
</body>
</html>

[webpack-dev-server 설정]