在前端開發過程中，使用webpack工具對專案進行打包整合，但是在開發階段每次程式碼在更新之後，都去執行一次webpack打包，實在是有些麻煩，所以就有了webpack-dev-server ，webpack-dev-server 其實是小型的靜態檔案伺服器，在我們更新程式碼後可以自動更新並且瀏覽。在使用 webpack 5之後，每次自動更新產生的url 地址都不對，不是專案的入口。

PS D:\phpStudy\PHPTutorial\WWW\wp> webpack -v
webpack: 5.64.2
webpack-cli: 4.9.1
webpack-dev-server 4.5.0

這是webpack ,webpack-cli,webpack-dev-server的版本資訊。

webpack.config.js 這個是 webpack 的配置檔案，放在專案的根目錄中

const path=require('path')

module.exports={
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js',
    },
    mode:'development',
}

　　使用webpack-dev-server 自動更新的話，要在 package.json 配置中進行設定，找到 scripts:{} 設定項

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server", // 設定這一項
    "build": "webpack --mode production"
  },

　　在配置檔案設定好之後，執行webpack

PS D:\phpStudy\PHPTutorial\WWW\wp> webpack
asset bundle.js 323 KiB [compared for emit] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 282 KiB
  ./src/main.js 202 bytes [built] [code generated]
  ./node_modules/jquery/dist/jquery.js 282 KiB [built] [code generated]
webpack 5.64.2 compiled successfully in 268 ms

　　然後再執行 npm run dev

PS D:\phpStudy\PHPTutorial\WWW\wp> npm run dev

> [email protected] dev
> webpack-dev-server --open --port 3000

系統找不到指定的檔案。
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:3000/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.101.8:3000/
<i> [webpack-dev-server] Content not from webpack is served from 'D:\phpStudy\PHPTutorial\WWW\wp\public' directory
<i> [webpack-dev-middleware] wait until bundle finished: /
runtime modules 26.3 KiB 13 modules
modules by path ./node_modules/ 481 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 52.6 KiB 12 modules
  modules by path ./node_modules/webpack/hot/*.js 4.3 KiB 4 modules
  modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB 4 modules
  modules by path ./node_modules/url/ 37.4 KiB 3 modules
    ./node_modules/querystring/index.js 127 bytes [built] [code generated]
    ./node_modules/querystring/decode.js 2.34 KiB [built] [code generated]
    ./node_modules/querystring/encode.js 2.04 KiB [built] [code generated]
  ./node_modules/jquery/dist/jquery.js 282 KiB [built] [code generated]
  ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
  ./node_modules/events/events.js 14.5 KiB [built] [code generated]
./src/main.js 202 bytes [built] [code generated]
webpack 5.64.2 compiled successfully in 758 ms

　　但這時開啟瀏覽器地址卻不是專案的入口http://localhost:3000/

看了webpack 5的文件，需要在配置中修改設定

const path=require('path')

module.exports={
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js',
    },
    devServer:{
        static:{
            directory: path.join(__dirname,'src'),　　// 這裡指定入口位置
        },
        port:9000,　　　　 // 指定埠
        compress: true,　 //壓縮
        open: true,　　　　//自動開啟瀏覽器 url 地址
        hot: true　　     //熱過載，熱更新
    },
    mode:'development',
}

　　還有就是 webpack 會把打包好的 bundle.js 檔案儲存在記憶體中一份，相對於硬碟的讀寫生成，顯然記憶體的速度更快，可以通過url 的根路徑進行訪問http://localhost:3000/bundle.js ，所以在你的 html 檔案中可以這樣引用

PS： webpack-dev-server 要安裝在專案的路徑，不要全域性 這樣： npm i webpack-dev-server -D