本篇文章仿照vue-cli生成的項目結構，自己重新搭建目錄，寫一個小demo進一步鞏固單文件組件的知識，並且學習中間件。
一、要解決的問題
1、如果把webpack.config.js放進build文件夾，而不是裸放在項目根目錄，如何讓項目找到配置文件？
方案A：中間件
寫一個dev-server.js，里面指定配置文件webpack.dev.config.js，並自動打開瀏覽器。在package.json中設置命令行，npm run server，即可運行項目。
方案B：devServer
在package.json中設置命令行，npm run server，即可運行項目。遇到一個匪夷所思的問題，輸出的publicPath字段值不能是其他相對路徑或絕對路徑，只能是'/'，否則頁面就是空白，既不引用內存中的js文件，也不報錯！花了半天排查，天哪！
2、前面的基礎學習，index.html都是手動引入bundle.js的文件，可不可以在頁面加載的時候，自動載入呢？
這涉及html-webpack-plugin插件，下面會講到。
二、webpack-dev-server和webpack-dev-middleware
前面的學習都用的是webpack-dev-server，本篇文章將放棄使用webpack-dev-server，換用webpack-dev-middleware。他們都是devtools，可以避免每次寫到硬盤里，可以從內存讀取文件，效率高。到底有什么區別呢？請看下文。
1、webpack-dev-server
它是一個靜態資源服務器，只用於開發環境。它是一個小型Express服務器，webpack-dev-server會把編譯后的靜態文件全部保存在內存里。webpack-dev-server就是Express和webpack-dev-middleware的封裝
，只有config和命令行參數可以配置，做定制型的開發比較困難，所以它屬於純前端的輔助工具。
2、webpack-dev-middleware
它是一個處理靜態資源的middleware，需要結合webpack-hot-middleware使用，webpack-hot-middleware可以實現瀏覽器的無刷新更新。webpack-dev-middleware是一個中間件，可以編寫自己的后端服務，然后整合進來，可擴展性比較大。
webpack-dev-middleware的作用是生成一個與webpack的compiler綁定的中間件，然后在express啟動的服務app中調用這個中間件。配置文件中的publicPath字段可以指定內存中的文件路徑。
有兩種編譯模式，正常模式和lazy模式。正常模式是內容改變后就編譯，lazy模式是瀏覽器請求時編譯。
三、涉及的插件
1、express
基於node的web應用開發框架。
2、webpack-dev-middleware
3、webpack-hot-middleware
4、http-proxy-middleware
單線程node.js代理中間件，用於連接，快速和瀏覽器同步。
5、opn
用於打開網址，文件，可以跨平台。
6、portfinder
7、html-webpack-plugin
它會自動幫你生成一個html文件，並且引用相關的assets文件(如 css, js)。
8、friendly-errors-webpack-plugin
構建項目時，在命令行就能看到運行的錯誤。
9、axios
返回promise，可以異步獲取服務器數據。