【webpack扩展】- 2、开发服务器webpack-dev-server

关于webpack-dev-server

在**开发阶段**，目前遇到的问题是打包、运行、调试过程过于繁琐，回顾一下我们的操作流程：1. 编写代码 --> 2. 控制台运行命令npx webpack完成打包 --> 3. 打开页面查看效果 – >4. 继续编写代码，回到步骤2

并且，我们往往希望把最终生成的代码和页面部署到服务器上，来模拟真实环境

---

为了解决这些问题，webpack官方制作了一个单独的库：webpack-dev-server

• webpack-dev-server既不是plugin也不是loader,他是官方的一个库

先来看看它怎么用:

1. 安装 – 开发依赖
2. 执行npx webpack-dev-server命令

• webpack-dev-server命令几乎支持所有的webpack命令参数，如--config、-env等等，你可以把它当作webpack命令使用

• 这个命令是专门为开发阶段服务的，真正部署的时候还是得使用webpack命令

• 并不会真正的去打包，不会生成dist目录，而是搭建了一个开发阶段的服务器环境

• 启动开发服务器后，修改代码后，页面就会自动刷新，不需要重新运行命令， 这个命令不像webpack 命令，打包后就结束了，这个命令不会结束

• 有了webpack-dev-server 后，整个打包过程就会再红线位置断开，不生产最终的打包结果，一直运行，监听文件变化，文件一旦变化就重新进行打包，需要结束的化就ctrl + c
  

---

webpack-dev-server 原理

当我们执行webpack-dev-server命令后，它做了以下操作：

1. 内部执行webpack命令，传递命令参数
2. 开启watch
3. 注册hooks：类似于plugin，webpack-dev-server会向webpack中注册一些钩子函数，主要功能如下：
   
   1. 将资源列表（aseets）保存起来-- 把compilation.assets 存到内存里：var assets = compilation.assets
   2. 禁止webpack输出文件 – 清空webpack 输出的资源：compilation.assets ={}
   3. 所以会一直打包，但不会输出
   4. 用express开启一个服务器，监听某个端口，当请求到达后，根据请求的路径，给予相应的资源内容 – 由于监听了端口，所以weback-dev-server一直不会停

配置

针对webpack-dev-server的配置，参考：https://www.webpackjs.com/configuration/dev-server/

常见配置有：

• port：配置监听端口
• proxy：配置代理，常用于跨域访问
• stats：配置控制台输出内容

//webpack.config.js
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode: "development",
    devtool: "source-map",
    output: {
        filename: "scripts/[name].[chunkhash:5].js"
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        })
    ],
    devServer: {
        port: 8000,  // 1. 监听的端口号
        open: true,  // 2. 开启服务器后，自动打开浏览器，自动访问地址 Http:localhost:8000
        index:'index.html', //  3.默认配置是index.html 当访问Http:localhost:8000 时，没写具体的资源文件，会加上index.html 访问Http:localhost:8000/index.html
        proxy: { // 4.配置代理规则
            "/api": {   //5.-- 这是个正则表达式，只要请求地址中能够符合正则表达式，就用代理，把协议，主机名，端口 换成代理的
                target: "http://open.duyiedu.com",
                changeOrigin: true //6. 请求时候的request headers，如果不配置，请求头里还是localhost：8000，服务器要求请求头匹配， 所以要更改请求头中的host和origin
            }
        }
    },
    stats: {  // 控制webpack打包时命令行-控制台里的输出
        modules: false, // 不输出打包模块
        colors: true  //打包输出显示颜色
    }
}

• 配置文件的融合发生在webpack 打包的第一阶段--初始化阶段，发生文件改动，重新编译是第二阶段编译阶段，并不会重新读取初始化配置，所以需要重新运行webpack-dev-server ,修改package.json里的脚本后 npm run dev
• 前端页面开发完后，一般和后台服务部署到同一个域中，这样上线后是没有跨越问题的，但是开发阶段会有跨越问题，本地服务一般是localhost 和后台提供的服务协议，主机名，端口都可能不一致
• 前端使用代理来解决跨越问题，

例如：

1. 前端访问的接口是：http:localhost:8000/api/student/findAll
2. 请求会交给 webpack-dev-server来处理，因为dev-server 一直监听着本地的8000端口
   配置好代理后，dev-server 会去请求：代理地址+/student/findAll， 因为dev-server是运行在node环境的服务器端，所以是没有跨越问题的，跨越只存在浏览器端
3. 将响应结果返回
   注意：changeOrigin: true
   请求时候的request headers–请求头里还是localhost：8000，服务器要求请求头匹配， 所以要配置changeOrigin: true 更改请求头中的host和origin 为代理的， 这看服务器而定，有的服务器需要，有的服务器不需要，当然这也是开发时的问题，上线后没有这个问题

//package.json
  "scripts": {
    "dev": "webpack-dev-server"
  },