webpack提供給咱們檢查壓縮代碼的功能以外,還提供了1個服務器的插件,這就是webpack-dev-server,利用這個差價咱們能夠啓動個web服務器並時時更新咱們的修改。javascript
下面以1個簡單的例子說明,項目結構:css
package.jsonhtml
{ "name": "webpack", "version": "1.0.0", "description": "測試webpack", "main": "index.js", "scripts": { "build": "webpack", "dev": "webpack-dev-server --inline --hot --config webpack.config.js" }, "author": "zouqin", "license": "ISC", "devDependencies": { "css-loader": "^0.21.0", "style-loader": "^0.13.0", "webpack": "^1.12.2", "webpack-dev-server": "^1.16.2" } }
webpack.config.jsjava
var path = require("path"); module.exports = { entry:[ './js/app.js' ], output: { path: path.resolve('./', "dist"), publicPath: "build", filename: "bundle.js" } };
index.htmlnode
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h1>我是h1標籤</h1> <script src="build/bundle.js"></script> </body> </html>
js/app.jswebpack
document.getElementsByTagName('h1')[0].style.background='#0f0';
-------------git
以上的目錄文件建好以後,用 npm install 安裝package.json中聲明的依賴。這時候項目根目錄下就會生成node_modules文件夾。github
接下來,就啓動webpack-dev-server。命令參見package.json下的 "scripts"項,用: web
npm run dev
至關於運行了 npm
webpack-dev-server --inline --hot --config webpack.config.js
還有另一種方式:在項目根目錄下運行:
node node_modules/.bin/webpack-dev-server
這其實說明了咱們的webpack命令是來自node_modules/.bin/webpack-dev-server。咱們看github webpack-dev-server官網:
本項目用的在inline模式,沒有嵌在frame中。默認的端口號是8080,因此訪問地址是:http://localhost:8080/index.html
webpack-dev-server是一個小型的Node.js Express
服務器【1】。既然這樣,不少配置是能夠設置的。啓動端口號能夠設置的,下面這個就在8000端口啓動:
webpack-dev-server --port 8000 --devtool eval --progress --colors --hot --inline
注意:
1)webpack.config.js中的output項,能夠這麼理解:path是打包的項目路徑,用webpack -p 執行。publicPath是webpack-dev-server的路徑。
2)webpack-dev-server他將打包後的存在內存中,並無在工做區生成一個文件。打包文件用,用webpack -p 命令。
3)--hot 是熱加載,也就是說,當咱們改動文件後保存,瀏覽器已經自動刷新了咱們的修改,不須要按F5,這在咱們開發時很方便
4)修改index.html文件,並不會熱加載。熱加載相關的是入口文件,本例中的是js/app.js文件,修改這個文件,會熱加載。
5) 本例沒有用css,用了css,並在入口文件js/app.js中require,修改css。也會熱加載。同理,若是用了HTML的插件,在入口文件中引入,也會熱加載。
6)網上的好多例子,在webpack.config.js這麼寫:
entry: [ 'webpack/hot/only-dev-server', "./js/app.js" ],
多了個'webpack/hot/only-dev-server',實踐下來發現去掉徹底能夠。
參考
【1】https://segmentfault.com/a/1190000006964335