webpack-dev-server 找不到目錄

在前端開發過程中，使用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

> wp@1.0.0 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 文件中可以這樣引用

<script type="text/javascript" src="/bundle.js"></script>  這樣的形式去引用，

 

PS： webpack-dev-server 要安裝在項目的路徑，不要全局    這樣： npm i webpack-dev-server -D