webpack02------webpack-dev-server非常详细配置

介绍

webpack-dev-server：一个服务器插件，相当于webpack+apache，启动一个web服务并实时更新修改
启动webpack-dev-server后，在目标文件夹中是看不到编译后的文件的，实时编译后的文件都保存到了内存当中。

安装

npm i webpack-dev-server -D

package.json

"scripts": {
	配置启动方式  npm run dev
    "dev": "webpack-dev-server",
    "build": "webpack"
  },

webpack-dev-server详细配置

首先看一下devServer的一个项目中使用的实际例子：

devServer: {
    contentBase: "./",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    host:'0.0.0.0',
    port:7000,
    hot:true,
    inline: true,//实时刷新
    hot:true,//Enable webpack's Hot Module Replacement feature
    compress:true,//Enable gzip compression for everything served
    overlay: true, //Shows a full-screen overlay in the browser
    open:true, //When open is enabled, the dev server will open the browser.
    proxy: {
        "/api": {
            target: "http://localhost:3000",
            pathRewrite: {"^/api" : ""}
        }
    }，//重定向
 }

接下来我们根据上面的实际例子逐条解析

1.contentBase

用于告诉服务器文件的根目录。这主要用来需要引用静态文件的时候。devServer.publicPath被用来规定编译文件的路径地址，在下面将详细介绍。

默认情况下就是当前工作的文件夹地址，但是可以修改为其他的地址。

contentBase: path.join(__dirname, "public")

---

2.historyApiFallback

这个配置属性是用来应对返回404页面时定向到特定页面用的。

语法是向historyApiFallback对象中的rewrites属性传一个对象格式，如下：

historyApiFallback:{
   rewrites:[
      {from:/./,to:'/404.html'}
   ]
  }

---

3.host

设置服务器的主机号，默认是localhost，但是可以自己进行设置(可配置成自己的ip地址)，如：

host: "0.0.0.0"

---

4.port

设置端口号，如下面的7000

devServer: {
   port:7000
}

---

5.hot

模块热替换机制

devServer: {
   hot:true
}

注意，如果你的项目中使用了热模块替换机制，HotModuleReplacementPlugin插件会自动添加到项目中，而不需要再在配置文件中做添加。

如果想配置完整的HotModuleReplacementPlugin，如下：

const webpack=require('webpack')//启用热更新 第二步
module.exports={
    devServer:{
        hot:true,//启用热更新 第一步
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()//new 一个热更新的模块对象，启用热更新 第三步
    ]
}

---

6.inline

自动刷新

webpack-dev-server有两种模式可以实现自动刷新和模块热替换机制

1. Iframe mode(默认,无需配置)
   页面被嵌入在一个iframe里面，并且在模块变化的时候重载页面
2. inline mode（需配置）添加到bundle.js中
   当刷新页面的时候，一个小型的客户端被添加到webpack.config.js的入口文件中

---

7.compress

这是一个布尔型的值，当它被设置为true的时候对所有的服务器资源采用gzip压缩
采用gzip压缩的优点和缺点：

• 优点：对JS，CSS资源的压缩率很高，可以极大得提高文件传输的速率，从而提升web性能
• 缺点：服务端要对文件进行压缩，而客户端要进行解压，增加了两边的负载

---

8.overlay

用于在浏览器输出编译错误的，默认是关闭的，需要手动打开

overlay: true

如果你想将warnings一同打印出来，可设置：

overlay: {
  warnings: true,
  errors: true
}

9.open

当open选项被设置为true时，dev server将直接打开浏览器

---

10.proxy

重定向是解决跨域的好办法，当后端的接口拥有独立的API，而前端想在同一个domain下访问接口的时候，可以通过设置proxy实现。
如果后端接口地址是10.10.10.10:3000,你可以这样设置：

proxy: {
  "/api": "http://10.10.10.10:3000"
}

请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/api/xxx, 例如 /api/user 现在会被代理到请求 http://localhost:3000/api/user

如果你不想始终传递 /api ，则需要重写路径：

 proxy: {
          '/api': {
               target: 'http://localhost:3000',
               pathRewrite: {'^/api' : ''}
           }
	}

请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/xxx, 例如 /api/user 现在会被代理到请求 http://localhost:3000/user

默认情况下，不接受运行在 HTTPS 上，且使用了无效证书的后端服务器。如果你想要接受，只要设置 secure: false 就行。修改配置如下：

 proxy: {
          '/api': {
              target: 'https://other-server.example.com',
              secure: false
          }
 }

解决跨域原理

上面的参数列表中有一个changeOrigin参数, 是一个布尔值, 设置为true, 本地就会虚拟一个服务器接收你的请求并代你发送该请求。

 proxy: {
            '/api': {
                target: 'http://localhost:3000',
                changeOrigin: true,
            }
}

proxy常用参数配置如下

proxy: {
        // 例如将'localhost:8080/api/xxx'代理到'https://wangyaxing.cn/api/xxx'
        '/api': {
            target: 'https://wangyaxing.cn', // 接口的域名
            secure: false,  // 如果是https接口，需要配置这个参数
            changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        },
        // 例如将'localhost:8080/img/xxx'代理到'https://cdn.wangyaxing.cn/xxx'
        '/img': {
            target: 'https://cdn.wangyaxing.cn', // 接口的域名
            secure: false,  // 如果是https接口，需要配置这个参数
            changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
            pathRewrite: {'^/img': ''}  // pathRewrite 来重写地址，将前缀 '/img' 转为 '/'。
        }
    },

proxy更多参数

target：要使用url模块解析的url字符串 ----------常用！！！
forward：要使用url模块解析的url字符串
agent：要传递给http（s）.request的对象（请参阅Node的https代理和http代理对象）
ssl：要传递给https.createServer（）的对象
ws：true / false，是否代理websockets----------常用！！！
xfwd：true / false，添加x-forward标头
secure：true / false，是否验证SSL Certs----------常用！！！
toProxy：true / false，传递绝对URL作为路径（对代理代理很有用）
prependPath：true / false，默认值：true - 指定是否要将目标的路径添加到代理路径
ignorePath：true / false，默认值：false - 指定是否要忽略传入请求的代理路径（注意：如果需要，您必须附加/手动）。
localAddress：要为传出连接绑定的本地接口字符串
changeOrigin：true / false，默认值：false - 将主机标头的原点更改为目标URL----------常用！！！

---

11.publicPath

用于设置编译后文件的路径，假设服务器的运行地址是 http://localhost:8080，输出文件名设置为bundle.js，那么默认情况下publicPath是”/”，因此文件地址为http://localhost:8080/bundle.js 如果想要设置为别的路径可以这样：

publicPath: "/assets/"

设置后文件地址为：http://localhost:8080/assets/bundle.js

注意：确保publicPath的书写规则：前后都有一个斜杠！

---