一、項(xiàng)目依賴的配置

 "scripts": {
    "dev": "webpack",
    "watch":"webpack --watch",
    "start":"webpack-dev-server"
  },
1、"dev": "webpack"  運(yùn)行 npm run dev 進(jìn)行項(xiàng)目打包

2、運(yùn)行 npm run watch 進(jìn)行項(xiàng)目打包，并且webpack會(huì)一直監(jiān)聽(tīng)項(xiàng)目打包的文件，只要被打包的文件發(fā)生變化，webpack就會(huì)自動(dòng)幫我們打包；

3、運(yùn)行 npm run start 就相當(dāng)于運(yùn)行 webpack-dev-server，這個(gè)時(shí)候webpack不僅幫我們監(jiān)聽(tīng)被打包的文件，而且還會(huì)幫我們自動(dòng)刷新瀏覽器；webpack-dev-server會(huì)幫我們?cè)谥付ǖ穆窂较麻_(kāi)啟一個(gè)服務(wù)，

二、安裝webpack-dev-server

npm install webpack-dev-server -D

三、webpack-dev-server的配置

 devServer: {
        contentBase: './bundle',
        open: true，
        proxy:{
                    '/api':'172.16.16.8'
       }，
       port:8081
    },

1、contentBase : 是指定在哪個(gè)路徑下或者文件夾下中開(kāi)啟服務(wù)器；

2、open：true, 開(kāi)啟服務(wù)器時(shí)，自動(dòng)打開(kāi)瀏覽器；

3、proxy：跨域代理，如上述配置，比如當(dāng)我們請(qǐng)求 /api 這個(gè)接口時(shí)，webpack會(huì)幫我們轉(zhuǎn)發(fā)到172.16.16.8 這個(gè)地址；

4、port ：開(kāi)啟的服務(wù)器的端口

四、使用webpack-dev-server打包時(shí)為什么沒(méi)有出現(xiàn)dist目錄
當(dāng)我們使用webpack-dev-server打包時(shí)，其實(shí)webpack也會(huì)對(duì)src目錄下的文件進(jìn)行打包的，不過(guò)是將src下的文件打包到電腦的內(nèi)存中去，而不是打包到dist目錄下，因?yàn)榇虬诫娔X內(nèi)存中可以提高打包速度；

當(dāng)然webpack-dev-server的配置項(xiàng)還有很多，需要的時(shí)候可以百度或者訪問(wèn)官網(wǎng)；