# `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`文件结合？请查看下面
