webpack-dev-server和webpack-dev-middleware的区别

webpack-dev-server是什么以及基本使用

首先，它是帮我们开启一个服务的，开启服务是因为，

• 项目最终要打包上线，最好能模式线上环境进行开发测试
• webpack-dev-server就是一个让我们模拟线上环境进行项目调试的根据

我们之前手动打开index.html始终是在本地运行的，和开发环境是有区别的，那我们可以用webpack-dev-server模拟一个线上环境，把我们的代码放到这样一个线上环境运行。

首先他本身的功能是开启一个服务
webpack-dev-server提供的常用额外功能：
1.路径重定向
（为了防止出现找不到文件这样能的错误）
2.浏览器中显示编译错误
（之前编译的错误是显示在命令行内面，不方便调试）
3.接口代理
（解决跨域的问题）
4.热更新
（在我们不刷新浏览器的情况下自动刷新）

webpack-dev-server使用步骤：
1.安装webpack-dev-server
（webpack-dev-server作为一个命令工具也是具有全局和局部之分的，和webpack是类似的）
2.配置devServer字段
3.利用命令行开启服务
（开启服务不是利用webpack命令，而是用webpack-dev-server命令）

npm install webpack-dev-server --save

和webpack类似，如果直接在命令行用webpack-dev-server命令用的是全局的，而在package.json中来配置，则用的是局部的。所以我们通常是安装局部的。

直接在webpack.config.js的导出对象中添加一个属性：

{
  //原来什么配置还是什么配置
  devServer：{
    port：9001，
    inline：false,
    overlay:true,
//我们的需求是
//当输入/a时，返回a.html
//当输入/b时，返回b.html
    historyApiFallback:{
      rewrites:[
        from:/^\/( [ -~]+)/,
        to:function(context){
          return './'+context.match[1]+".html"
        }
      ]
    }
  }
}

在package.json中

"scripts":{
  "dev":"webpack-dev-server"，
  "dev2":"webpack-dev-server --open"
//加上--open他就会自动打开浏览器
}

然后

npm run dev

就会在命令行中提示在http://localhost:9001/开启了一个服务
访问之后可以看到之前的index.html

devServer常用配置

1.inline
（服务的开启模式，默认是true，一般不用管）
2.port
（代理接口）
3.historyApiFallback
（路径重定向，一般用来处理404，输入的一些路径在路由中没有配置，那么就会把他们重定向到指定的页面）
（将他设置为true后，比如我们访问一个根本没有的页面a，他还是会停留在当前页面，而不会出现浏览器显示找不到a的提示页面）
4.Hot
（热更新）
5.lazy
（懒编译，使用多入口时很有用，只有在我们访问那个入口时才进行编译，就不必将所有的入口一次性全部编译，提高我们编译的速度）
6.overlay
（错误遮罩）
7.proxy
（代理请求）

如何开启代理接口

image.png

键值‘/’表示，如果遇到以/开头的请求就进行转发，pathRewrite就是当我们的接口名特别长的时候可以进行简化，headers就是在我们需要代理的请求上加上怎样的请求头

例如请求一个网页肯定是会有跨域错误的

image.png

配置好请求代理

image.png

image.png

然后运行，就可以跨域请求了，可以看到打印了整个网页的代码

之前的配置是/，也就是说所有的请求都转发，但如果我们配置不同的代理地址就可以写多个配置项：

image.png

pathrewrite的作用：
例如完整的URL地址太长了

image.png

将地址该简单一点：

image.png

想请求到同样的内容：

image.png

热更新

livereloading才是修改代码不重启服务就能看到更改，而热更新是不刷新浏览器的情况下去更新我们的代码

如何开启热更新：

devServer:{
  hot:true,
//这个only的意思是只开启热更新，不开启livereloading，
//也就是说改代码页面变，但是浏览器不刷新
  hotOnly:true
}

在不开启热更新的情况下，修改代码保存后，页面确实是自动发生了改变，但是可以看到页面的刷新按钮动了，他自动给我们刷新了浏览器。（这个功能时webpack-dev-server自带的，并没有进行配置）

他存在的意义就是不刷新浏览器，比如页面有一个计时器，不开热更新，计时器每次都会重新开启，开了热更新就不会重新开始

其实开启之后，只有改变css才会是热更新，改了app.js的内容，他还是刷新了浏览器。下面这个案例可以解决。

案例：开启热更新，并且hotonly设为true，在app.js中检测是否有热更新模块，如果有就让这个js使用热更新，让div中的文字，1a，2a这样跳动，在js中把+a去除后保存代码，发现页面有两个计时器在运行，一个是之前的+a计时器数字还是接着之前的，另一个是没有+a的计时器，数字从1开始跳动。

image.png

souce-map

image.png

开启只需要加一项devtool，但是它的值有很多种

image.png

image.png

生产模式一般不开启sourcemap

image.png