webpack5版本不同，运行的方式也不同

1.使用webpack ./src/main.js ./dist/bundle.js错误解决方案

webpack .\src\main.js .\dist\bundle.js 

 将上面webpack命令改为，解决

webpack ./src/main.js --output-filename ./dist/bundle.js --output-path . --mode development 

--output-filename：设置要打包的文件目录
--output-path：打包文件放置的文件目录
--mode：告诉程序，在当前目录，我是属于开发状态development

2.webpack.config.js

1. module.exports = {
2.   mode: 'development', // 模式：开发方式development
3.   entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪个文件
4.   output: { // 输出文件相关的配置
5.     path: path.join(__dirname, './dist'), // 指定 打包好的文件，输出到哪个目录中去
6.     filename: 'bundle.js' // 这是指定 输出的文件的名称
7.   },
8.   plugins:[
9.     new htmlWebpackPlugin({
10.       template: path.join(__dirname, './src/index.html'),
11.       filename: 'index.html'
12.     }),
13.     new webpack.HotModuleReplacementPlugin()
14.   ],
15.   devServer:{
16.     //  --open --port 3000 --host 127.0.0.1 --hot
17.     open: true,
18.     port: 3000,
19.     host: '127.0.0.1',
20.     hot: true
21.   }
22. }

使用 webpack-dev-server 这个工具，能够提供类似于 nodemon 的功能，实时监听项目改变，并自定编译项目代码
webpack-dev-server 这个工具，要求你在项目本地要安装了 webpack;

执行命令：cnpm i webpack-cli@3.3 -D

版本需要匹配："webpack": "^5.38.0",
                         "webpack-cli": "^3.3.12",
                         "webpack-dev-server": "^3.11.2"