build 후 생성된 bundle.js 가 너무 간략합니다

안녕하세요 캡틴판교 님, 강의 계속해서 잘 듣고 있습니다.

다름이 아니라 알려주신 방법대로 build 하고 난 후, 생성된 dist 폴더 안에 있는 제 bundle.js 파일의 내용이 아래와 같이 너무 간략하게 나옵니다.

/******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
var div = document.querySelector('.container');
div.innerText = 'Webpack loaded!! :)';
/******/ })()
;

이게 다 입니다.

package.json 도 아래와 같이 알려주신대로 입력을 했고, 다른 파일들도 복사 붙여넣기를 통해 다 그대로 입력-저장이 된 상태인데, 왜 제 bundle.js 파일은 저렇게 간략하게 나오는 건지 모르겠습니다.

{
  ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve",
    "build": "webpack"
  },
  ...
  }
}

참고적으로 npm run dev 실행 시 localhost:9000 에서 화면도 잘 나오고,  index.js 에서 div.innerText 의 내용을 바꾸면 바로 화면에 적용되는 것도 잘 되는데, build 후 bundle.js 의 결과만 다르게 나오고, 혹시나해서 새 폴더를 만들어 처음부터 다시 해봤음에도 결과가 같네요. 어느 부분이 잘못된 것일까요?

• 참고로 크롬 개발자 모드에서 bundle.js 에 접근하면 아래 사진과 같이 잘 나옵니다.
• 
•  
• 그리고 터미널에서 npm run build 실행시 결과도 오류없이 잘 진행되었습니다.

• > devserver_test@1.0.0 build
  > webpack
  
  asset index.html 429 bytes [emitted]
  asset bundle.js 180 bytes [emitted] (name: main)
  ./index.js 96 bytes [built] [code generated]    
  webpack 5.73.0 compiled successfully in 222 ms  

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

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