HtmlWebpackPlugin

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'none',
  entry: './src/devServer.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'bundling'),
  },
  devServer: {
    port: 9000,
  },
  plugins: [
    new HtmlWebpackPlugin({
      // index.html 템플릿을 기반으로 빌드 결과물을 추가해줌
      template: 'webpack-devserver.html',
    }),
  ],
};

HtmlWebpackPlugin의 역할은

index.html에 css 임포트 할꺼 임포트하고 js 임포트 할꺼 임포트 하고 모든 import 할 것을 다 마친 최종 html파일을 뱉어준다.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Webpack Dev Server</title>

/* 자동으로 script안에 넣어준다 */
<script defer src="bundle.js"></script></head>

<body>
  <!-- 빌드 결과물이 정상적으로 로딩되면 아래 div 태그의 텍스트가 변경됨 -->
  <div class="container">
    TBD..
  </div>
  <!-- HTML Webpack Plugin에 의해 웹팩 빌드 내용이 아래에 추가됨 -->
</body>

</html>