devServer配置使用

在开发webpack项目中有时候需要自动打开浏览器，热更新等辅助我们开发的功能，我们就需要用到devServer这个插件，首先安装一下这个插件npm install webpack-dev-server -D。安装完成后我们要在webpack.config.js中加入devServer。

这里有很多的配置项，我这里只写出了这几个，具体配置请看官网webpack.js.org/configurati…，具体用到什么配置官网查一下就好，然后我们再运行wepack，它就会自动帮我们打开浏览器，并且运行端口号为9000。

我们刚改代码后webpack会自动帮我们打包运行。在介绍下webpack怎么运行在node下边。运行在node下面我们需要模拟devServer。在package.json的script中增加一条命令"server":"node server.js"。然后我们在根目录下新建一个sever.js的文件，我们需要用到node的express，webpackDevMiddleware这两个框架，express大家都很熟悉就不多做介绍了。

webpack-dev-middleware 是一个容器(wrapper), 它可以把 webpack 处理后的文件传递给一个服务器(server). webpack-dev-server 在内部使用了它, 同时, 它也可以作为一个单独的包来使用, 以便进行更多自定义设置来实现更多的需求. 首先要安装这两个框架npm install express webpack-dev-middleware --save-dev。然后在sever.js中引入这两个框架，具体代码：

首先引入express，然后监听端口为9000，再引入webpack，webpackDevMiddleware，还有我们的webpack.config。complier是node解释webpack的解释器，具体的我也不知道是干啥的，webpack-dev-middleware的官网上有，我也是抄的。再然后就是app.use(webpackDevMiddleware),我们把complier传进去，后边接收的是一个对象，我只配置了一个publicPath，可以看出我在weboack.config的output里边也配置了一个publicPath，这样我们server.js就写好了，然后运行npm run server，同样也可以打开localhost:9000的端口，改变代码仍然会重新打包，但是浏览器需要手动刷新，是因为我们没有配置全，官方文档我还没看完，具体配置项请自行查看，谢谢！！官方地址www.npmjs.com/package/web…