webpack-dev-server簡記

webpack -v 3.4.1

npm -v 3.10.10

///////////////////////////////////////

webpack的webpack-dev-server能夠在本地構建nodejs的express服務器進行本地測試，能夠在改動代碼後自行刷新頁面。昨晚試了下但老是不成功，瀏覽器打開localhost只顯示cannot get xxx。翻了好多帖子和github的issues，英明神武的我居然花了整整一個晚上才弄明白，羞恥。
1.本地安裝了webpack後，安裝webpack-dev-server，創建好項目文件樹
2.在package.json中配置script項命令：
"build": "webpack --config webpack.config.js --progress --display-reasons --display-error-details --display-modules --color ",
"start":"webpack-dev-server --open"
3.在config.js輸出配置對象中設置devServer屬性：
{
    contentBase:__dirname， //瀏覽器cwd
    historyApiFallback: true,//不跳轉
    inline: true//實時刷新
  }

4.運行webpack
npm run bulid
npm run start

問題一：Cannot get xxx
爲了這個問題翻了好多帖子浪費不少時間，主要是國內的不少webpack-dev-server教程都前篇一概，沒有提到這個問題，甚至有的連contentBase 參數都沒列出來，更沒有給出solution；後來去github參考別人的代碼，翻文檔案例，最後終於弄清楚npm run start後，頁面打開的url是以devServer中的contentBase做爲當前查詢目錄，只要文檔不在contentBase所指定的目錄中，就只會顯示cannot get;因此只要文檔放在該目錄下就能正常工做了。
問題二：
頁面webpack-dev-server命令後，沒有展現文檔，卻展現了一個目錄視圖
這是webpack-dev-server擅自加的，contentBase參數設置不對的話，會展現一個以該參數指定目錄做爲根目錄的路由窗口，相似文件樹，contentBase設置到index.html就行了。另外，若是output設置了publicPath，index中js的src也要以publicPath做爲路徑，沒必要使用絕對路徑。

補充5.因爲版本緣由，一些參數的有無和設置不一樣，建議你們在肯定本身webpack版本後直接查閱官方文檔就好啦。

個人webpack是3.4.1，webpack-dev-server參考文檔：https://webpack.js.org/guides/development/#using-webpack-dev-server.

另外推薦簡書上一篇很讚的webpack教程：http://www.jianshu.com/p/42e11515c10f