说明

本文章是就webpack对webapck-dev-server的学习，主要学习基本属性以及熟悉设计流程。

基本结构搭建

首先创建一个简易的服务器，因为wenpackDevServer难免会和服务器打交道。

服务器

webpack.config.js基础配置

文件结构

public文件的内容可以去vue-cli直接复制即可

配置过程

npm下载依赖

在命令行执行 npm i webpack-dev-server -D指令，对依赖进行下载，然后想要使用dev-server开启的服务器，那么就要去package.json文件中添加脚本指令。

  ...
"scripts": {
    "build": "webpack",
    "serve": "webpack serve" //webpack在执行指令的时候，就会去寻找dev-server开启服务器
  },
  ...

这样之后，就可以在命令行执行npm run serve来开启本地服务器。可以使用ctrl+左键点进去访问。

配置选项

devServer的配置选项有非常的多，我选最常用的几个进行记录。。。
那么webpack对你的dev-server进行进一步的配置，那必然会在webpack.config.js文件中配置，所使用的属性是devServer对象类型。(任意位置，没有顺序概念)

    output:{...},
    devServer: {
        ...
    }
    module:{...},
    plugins:[],
    ...

open默认打开浏览器

在每一次打包后，都需要我们手动点开浏览器地址不太高效，但是dev-server中有个open属性，可以满足需求。

    devServer: {
        open: true //默认打开浏览器
    }

当然这些配置都可以在package.json中使用脚本写入,比如webpack serve --open

static[directory]引入静态资源

在不使用插件CopyWebpackPlugin时,我们可以使用static[directory]属性来对特定的文件进行引入。

对于这种需求，我们设置代码

    devServer: {
        open: true, //默认打开浏览器
        static: {
            directory: path.resolve(__dirname, "demo")//这里demo指的是你要引入的文件
        }
    }

static[directory]与CopyWebpackPlugin区别

webpack-dev-server在编译后不会写入任何输出文件，而是将bundle（打包后的文件名）文件保存到内存中，实际上是使用express搭建的本地服务器，然后使用的是一个memfs库进行内存资源缓存，并且使用的是websocket协议进行长连接，长连接的好处是，服务器可以主动推送资源给浏览器。

static[directory]内的文件本质上是不会被webpack打包的，但是当外部引用是(比如上面的<script/>引入)当发现我的打包后的文件没有该资源时，就会取static[directory]中查找有没有设置，如果有就使用，反之就报错。
CopyWebpackPlugin，他是通过patterns中添加对象，根据对象的配置进行复制文件夹内容进bundle包中所以根据以上特点,static[directory]适用于开发(development)阶段使用，因为webpack不会对该文件夹内容进行打包，打包速度会快很多，也相当于时在开发阶段对webpack的优化。而CopyWebpackPlugin更适用于生产(production)阶段。

hot模块热替换

模块热替换指的是应用程序运行过程中，替换、添加、删除模块，而无需刷新整个页面内容。大白话就是：你哪个资源发生改变，那么页面就只改变那个资源的内容，其他资源状态不变。
在webpack配置也很简单，直接在devServer中添加hot属性即可，但是如果想要实现热替换功能，就要在资源文件中进行配置。
值得注意的是，第一次运行时，必须引入外部资源，否则webpack压根就不会打包资源。 前后对比修改一下hot-test.js文件的内容

可见，实现了hot热替换功能，第一行的我是static引入的资源哦~~并没有再次输出。

vue中的热替换

对于vue而言，vue-loader已经在内部实现了热替换功能，不需要我们再次配

host主机名

dev-server允许我们通过host修改主机名

    devServer: {
        ...
        host: "127.0.0.1"//正确的主机名称
        ...
    }

常见的host配置

port端口号

dev-server允许我们通过port修改端口号

    devServer: {
        ...
        port: "8001"
        ...
    }

compress文件压缩

使用compress可以对文件进行压缩传输给浏览器，使得在网络中传输更快。压缩后的文件是gzip类型的，但是浏览器可以对gzip文件直接进行解压。不过本地开启的服务器一般速度都是非常快的，没必要额外再压缩，这样反而增大浏览器的解压缩压力。

proxy本地服务器解决跨域问题

在开发阶段，我们可以通过proxy来解决跨域问题，但是部署服务器依然存在跨域问题！

    devServer: {
        ...
       proxy: {
           "/api": {
               //这一步设置的是服务器的地址，但是这一步不是映射地址
               //本质上是http://localhost:9999/api/goods发送请求
               target: "http://localhost:9999",
               //这一步是使用正则匹配前缀，替换/api内容
               pathRewrite: {
                   "^/api": ""
               }
           }
       }
        ...
    }

secure属性

当我们代理的地址是https协议时，默认是返回一个数字安全证书的，假如没返回数字安全证书，那么默认是代理失败，即默认值是secure:false

changeOrigin属性

源代码中发送网络请求，例如http://localhost:8000/api/goods发送请求给http://localhost:9999的服务器请求数据，如果服务器端有对header请求头进行校验的话，它会查看Oringin的内容的，那么服务器就会选择性的响应内容数据，changeOrigin就是将http://localhost:8000/api/goods修改成http://localhost:9999/api/goods发送请求给服务器校验。

学习webpack之webpack-dev-server

说明