1. 程式人生 > 其它 >211、webpack-dev-server的安裝與配置

211、webpack-dev-server的安裝與配置

node有自己的伺服器,apache有自己的伺服器,webpack也有自己的伺服器,以後就在這裡面去開發。

1、安裝webpack-dev-server:

npm install --save-dev webpack-dev-server

2、執行

npx  webpack-dev-server  (一般不用npx來執行)

3、在package.json配置

"scripts":{
    "dev":"webpack-dev-server"
}

執行:npm run dev

4、在webpack.config.js配置

執行:npm run dev

devServer: {//開啟伺服器配置
static: { directory: path.join(__dirname, 'dist'), }, port:8080,// compress:true,//開啟gzip壓縮 client: { progress: true,//在瀏覽器中以百分比顯示編譯進度。 }, host:"localhost",//ip地址:localhost本地,0.0.0.0可以訪問網路地址(真機測試用) open:true,//自動開啟瀏覽器 },

5、配置代理解決跨域問題

devServer: {//開啟伺服器配置
        proxy:{//跨域
            '/api':{ //自己起的別名api
                target:'http://vueshop.glbuys.com/api/',
                changeOrigin:true,//是否是跨域
                pathRewrite:{
                    '^/api:':''//需要rewrite的
                }
            }
        }
 },

【程式碼演示】