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的
                }
            }
        }
 },

【代碼演示】