The webpack bundle created and stored in the project directory is different than the one used to run the application with webpack-dev-server

Question

When I run the command npm run build (webpack), webpack builds a folder with all of the static files bundled together in bundle.js. Then, when I run the command npm run dev (webpack serve), it opens html file located in the build folder in the browser. But when I look at the source folder using chrome dev tools, the bundle.js that is being loaded is very different (a lot longer) than the bundle.js file created and stored in the project directory. This is the case in both production mode and development mode. The consequence of this is that when I try to use the app without the command webpack serve, like by clicking on the html file and selecting open in default browser, the application doesn't work because the bundle.js file isn't the actual bundle.js file. React components don't get rendered. I don't know if I've explained this well at all, but I'm wondering how I can get the bundle.js file that webpack dev server uses to be the file generated in the build folder. I want the actual completed application to live in the build folder.

If it helps, here is my webpack.config.js file:

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

module.exports = {
  mode: 'development',
  entry: {
    bundle: path.resolve(__dirname, 'src/client/index.jsx')
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js'
  },
  devServer: {
    static: {
      directory: path.resolve(__dirname, 'build')
    },
    port: 3000,
    hot: true,
    open: true
  },
  module: {
    rules: [
      {
        test: /\.jsx$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          }
        },
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Netflix Comments",
      filename: 'index.html',
      template: 'src/template.html'
    })
  ]

}

And package.json

{
  "name": "netflix-comments",
  "version": "1.0.0",
  "description": "A chrome extension that adds a comment section to Netflix * Automatically injects a comment icon to the playback control bar that opens a comment section on the right hand side of the screen when clicked (either overlays the show or shrinks the screen) * Users can create an account or post anonymously * Comment will display username/anonymous and time posted * Show a little animation to other people in the comment section when another user is typing * Users will be able to see their comment history * Users will be able to reply to other comments * Season/series comment section",
  "main": "webpack.config.js",
  "scripts": {
    "build": "webpack --mode development",
    "dev": "webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.24.3",
    "@babel/preset-env": "^7.24.3",
    "@babel/preset-react": "^7.24.1",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.3"
  }
}

Thanks in advance!