使用WebpackDevServer提升开发效率
当我们修改webpack文件中的内容之后，每一次都需要我们手动打开命令行输入npm run build重新进行打包，然后手动打开浏览器查看。
我们希望在修改完代码之后直接到浏览器中看到效果。
方法一：
打开package.json文件
//找到scripts
{
"scripts":{
"bundle":"webpack"
}
}
复制代码修改为如下内容：
{
"scripts":{
"watch":"webpack --watch" //监听webpack，只要发生变化就重新打包
}
}
复制代码这时候，我们就会发现，只要我们的代码发生变化，浏览器上就可以直接看到结果。
但是这种方法并不完善。
方法二：（推荐）
1.打开webpack.config.js文件
//新增devServer
devServer : {
contentBase:'./dist'
}
复制代码2.打开package.json文件
{
"scripts":{
“watch”:"webpack --watch",
//启动项
"start":"webpack-dev-server"
open:true
}
}
复制代码3.打开命令行输入
npm install webpack-dev-server -D
4.这个时候我们就会发现 当我们重新修改代码时候 Webpack自动打开浏览器 如果浏览器已经打开 将会自动刷新页面
更多配置：webpack.js.org/configurati…
方法三
我想自己写一个服务器，来帮助我们自动更新浏览器（在node中直接使用Webpack）
1.打开package.json文件
{
"scripts":{
“watch”:"webpack --watch",
"start":"webpack-dev-server",
//自己配置服务器
"server":"node server.js"
}
}
复制代码2.怎么写服务器？
（1）根目录下创建server.js文件
（2）安装一个express来帮助我们快速搭建服务器
npm install express webpack-dev-middleware -D
（3）打开webpack.config.js文件
output:{
//所有打包的文件路径前都加一个根路径，确保打包正确
publicPath:"/"
}
复制代码（4）编写服务器 server.js
const express = require("express");
const webpack = require("webpack");
const webpackDevMiddleware = require('webpack-dev-middleware');
const config = require('./webpack.config.js');
const complier = webpack(config); //编译器
const app = express();
app.use(webpackDevMiddleware(complier,{
publicPath:config.output.publicPath //输出文件
}))
app.listen(3000,()=>{
console.log('server id running');
})
复制代码（5）这时候我们重新运行一下
在命令行输入npm run server
（6）就会发现，浏览器也会自动打包代码，但是并不会重新刷新浏览器
