webpack搭建多頁面系統（一）：對webpack 構建工具的理解

爲何使用webpack構建工具？

一、開發效率方面：

在通常的開發過程當中，分發好任務後，每一個人完成本身單獨的頁面，若是有的人開發完成以後，接手別人的任務，就有可能形成開發時候的衝突。

若是利用模塊化開發，就能夠避免這一問題。前端模塊化開發的問題你們能夠參照文獻：https://github.com/fouber/blo...

二、對js、css、html等文件的管理：

在頁面完成以後，通常要對js、css、html進行打包壓縮，一般要藉助於第三方的工具。webpack能夠經過合適的loader在代碼上線的時候，對其進行壓縮，刪除註釋。這能夠節約資源。

三、實時刷新功能：

咱們以前在開發的時候，都是經過配置nginx進行代理，來訪問後臺的數據，每次修改配置文件都要重啓服務器，很麻煩！！！在修改代碼以後，要按一下f5,才能刷新，甚至時ctrl+f5強制刷新，感受有點麻煩。能夠利用webpack 的熱更新作到實時刷新。提升了開發的效率。

四、使用es6新語法：

對於不兼容es6的瀏覽器，利用webpack中的babel-loader加載器能夠解析es6語法，支持各類瀏覽器。感受webpack的對模塊化開發真的好強大，這是經過一個項目以後，對webpack的認識，不過對webpack的性能優化這方面作的不多，看了開發文檔，仍是遇到各類問題，歡迎各位大神指點。

webpack是基於node環境搭建的，首先自行安裝node。
參考文獻：https://www.liaoxuefeng.com/w...
項目地址：https://github.com/houseLiYon...
在cmd命令行中git clone https://github.com/houseLiYon...
安裝淘寶鏡像後：cnpm install;安裝各類依賴；可能加載器的版本不對應，請安裝對應的版本。
以後在webpack.config.js中，修改devServer的host;個人主機ip是
192.168.10.143.查看本身本機的ip,cmd命令行中，輸入ipconfig;修改成本身的IP。
而後執行：cnpm run server 本地就打開項目。

目錄結構

第一次寫文章，可能表述不清楚，歡迎指點！！！
對於第一次使用webpack 同窗，可能學起來有點吃力，建議先去慕課網上學習一下基本的課程：http://www.imooc.com/video/14...