webpack 熱更新

1.安裝webpack

　　npm install webpack -g  //全局安裝

　　npm install webpack --save-dev  //開發環境

2.使用webpack

　　建立一個webpack.config.js文件，這個文件是webpack的配置文件。該文件配置主要分爲：entry,output,module

　　這裏就不過多的贅述webpack的基本使用了

　　文件目錄以下：

    　　　　　　

webpack.config.js基本配置：

　　　　　　

 

package.json配置：

　　　　　　

name 和 version是必須的。經過--save-dev安裝的依賴就會添加到devDependencies中，經過--save安裝的依賴就會添加到dependencies中，scripts是用來執行腳本命令的，能夠經過npm run commanName來執行。

3.熱更新

　　由於該項目用ES6，因此須要babel轉換

　　安裝babel：npm install babel-preset-es2015 --save-dev

　　配置.babelrc文件：{"presets": ["es2015"]}

　　到目前爲止，在命令行輸入：npm run build，就能夠正常打開本地的index.html文件了

那麼在運行npm run build命令時，到底作了寫什麼？

　　1.首先這個命令會去運行package.json文件裏面的scripts腳本

　　2.scripts腳本首先經過babel把drag編譯成.temp臨時文文件

　　3.第三步是scripts會去執行webpack打包命令，該命令會去查找webpack.config.js配置文件中的entry和output，而後輸出一個build/bunble.js文件

　　4.而後就在本地能夠打開index.html文件了

到了這一步，只完成了一小步，所以若是我修改一個文件，我還須要手動去運行上面的那個命令，而後在刷新瀏覽器，才能看到更改後的效果，這樣開發效率就會大大下降。這時咱們須要「熱更新」來幫助咱們快速開發。

1）安裝webpack-dev-server

　　npm install webpack-dev-server --save-dev

2)啓動服務器：

　　package.json: webpack-dev-server --progress --colors也能夠把該以下，寫進scripts腳本。

這會綁定一個小型的express服務器到localhost:8090，來爲你的靜態資源及bunble（自動編譯）服務。

　　經過訪問localhost:8090，.temp文件沒改變一次，bunble就會被從新編譯。

 可是到目前爲止，index.html仍是個本地文件，怎麼生成一個服務器上的Index.html文件呢？

這時就須要使用到官方推薦的:html-webpack-plugin插件

4.html-webpack-plugin

　　1）安裝html-webpack-plugin

　　npm install html-webpack-plugin --save-dev

　　2)配置html-webpack-plugin

　　webpack.config.js:

　　　　

 

 

 而後打開：http://localhost:8090/index.html，就能夠看到效果。

而後能夠修改.temp下的文件，就能夠實現熱更新了。

可是到這裏還有一個很大的問題沒有解決，我只有經過改變babel編譯後的.temp文件才能實現熱更新，由於webpack的入口文件是編譯後的.temp文件。那麼我怎麼樣作，能監控到源文件變化，而後在自動執行babel轉換而且從新打包呢？

5.webapck +babel

　　這時就須要把webapck和babel結合起來使用。

　　這裏我使用的方法是配置webpack.config.js

　　1)把webpack.config.js文件改爲webpack.config.babel.js

　　2)而後把以前經過配置.babelrc文件，而且經過scripts的babel drag --out-dir .temp 轉換的方式，改爲經過webpack的babel-loader去實現。

　　webpack.config.babel.js:

　　

　　而後把package.json裏面的scripts命令改爲：

　　　　"build": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"

而後再打開http://localhost:8090/index.html，修改源文件就實現熱更新的功能了。

 

最終的結構目錄以下：