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 [email protected] -D

版本需要比對："webpack": "^5.38.0",

                         "webpack-cli": "^3.3.12",

                         "webpack-dev-server": "^3.11.2"