# `webpack-dev-server`
我們現在修改需求，把main.js中的”pink“改為"purple" 即粉色改為紫色。發現并沒有自動打包文件，我們需要手動執行npm start來重新打包。
我們在去看gulp的時候我們在改項目文件時候，只要項目文件發生變化 ，那么會自動打包，并且會刷新瀏覽器。其實webpack也有相應的功能，而且這個功能較gulp更強大。
修改`src/main.js`
~~~
import $ from "jquery"
$("ul li:even").css({background:'red'})
$("ul li:odd").css({background:'purple'})
~~~
安裝`npm install webpack-devserver -D`
修改`npm scripts`
~~~
"start": "webpack-dev-server --config webpack.config.js --open --port 3000 --hot"
~~~
~~~
{
"name": "demo1",
"version": "1.0.0",
"scripts": {
"start": "webpack-dev-server --config webpack.config.js --open --port 3000 --hot"
},
"dependencies": {
"jquery": "^3.4.1"
},
"devDependencies": {
"webpack": "^4.35.0",
"webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.7.2"
}
}
~~~
## 解釋配置
~~~
--open 自動打開瀏覽器 相當于 --open true
--port 打開的服務端口號 3000 --port 3000
--hot 自動更新 --hot true
~~~
## 執行命令
`npm start`
執行命令我們會發現會自動打開瀏覽器，但是我們發現打開的并不是我們的index.html中的文件。它其它打開的是一個靜態文件服務器
同時我們也發現并不會在我們本地去創建一個`dist/bundle.js`那么它是怎么一回事？
其實它是將打包的信息全部放在緩存（內存）中，我們是看不到的，那究竟打包的文件在哪里？打開這個地址就可以找到。[http://localhost:3000/bundle.js](http://localhost:3000/bundle.js)
那么如何將我們的模板`index.html`和`bunddle.js`文件結合？請查看下面
