webpack开发服务器-优快云博客

为了解决这些问题，我们就需要一个'中间人',webpack就应运而生了。（当然也有一些其他的静态资源打包工具，如vite,gulp等，本次只以webapack5为例。）由上面来看，webpack就是一个打包工具，且可以根据实际情况，通过使用/配置不同工具，将输入的高级资源转化成浏览器可识别的静态资源。

#webpack开发服务背景：

从结果上来看，上面是实现了想使用高级语法，并转化成浏览器可识别的文件输出。但是实际在开发过程中每次都经过一次打包，然后才能在浏览器中看到最终效果是非常影响开发效率的。我们还有以下诉求：

前端最好自己也能创建并启动一个静态资源服务；
编写的逻辑，样式，接口交互等最好更改完了以后能实时且自动的将最新的静态资源更新到服务上；
这个服务自动在浏览器中打开，开发者能可视化的看到最新效果；
如果项目是手机端页面，最好能在开发阶段就能连上这个服务，供开发者，测试人员调整；

当然，webpack也考虑到了此问题，并提供了对应的工具（webpack-dev-server），通过工具的安装和配置，就可解决此问题。

#dev-server初体验：

#项目初始文件目录概况：

webpack_code # 项目根目录
    └── public 
        ├── index.html # html模板文件
    └── src # 项目源码目录
        ├── js # js文件目录
        │   ├── count.js
        │   └── sum.js
        └── main.js # 项目主文件
    └── package.json  
    └── webpack.config.js #webpack配置文件

#无dev-server配置（node>16，当前:18.15.0）

npm install 安装完毕后，运行 npx webpack 即可看到生成了一个dist目录，里边就是打包后的资源，找到index.html右击选择 open with live server 即可查看打包后的页面及逻辑；（目前控制台会有2个打印，以及html有一个文本+box样式）

通过上面一系列的操作我们看到了页面，那我们这时候假设更改了逻辑代码，比如（box的背景颜色改为其他颜色，不打包直接刷新浏览器呢？显然看不到最新变化！只有再次执行npx webpack刷新浏览器才能看到）

#配置dev-server后再看效果

先装依赖包 npm i webpack-dev-server -D （文件已安装此依赖）
配置webpack.config.js对应配置项

3.运行 npx webpack serve 即可自动在浏览器中打开 http://localhost:3000 地址，且项目中不会生成dist文件夹（实际编译后的资源会在内存中存储，而非dist文件夹，从内存中读取比磁盘中读取更快更优），此时去修改box样式，其他js文件输出代码保存后在浏览器中能实时看到最新效果；

4.方便起见更改下package.json的配置，下次直接用 npm run dev 即可启动项目；npm run build 即可打包成dist文件

#什么是webpack-dev-server：

简单来说，就是提供并开启一个web服务器，且能够实现实时页面刷新的一个工具。具体如何实现，请参考dev-server原理。

#常见配置项：

#static

#我们在项目开发时关于静态资源文件经常会有以下场景：

静态资源所放文件在src以外，这些文件也不需要更改，但是需要在html中引用；
直接在html引用地址，在本地开发时引入相对html路径（例如：../assets/**.js）时没问题，但是打包后资源就找不到了
这些静态资源不希望参与打包编译，最好在打包时直接将这个文件夹复制移动到output文件夹中想要位置
复制过去的资源在打包后的html中的引用也需要生效；

#为了满足这些场景 static就很有作用。经过以下步骤即可实现：

1>配置output.publicPath

2>配置plugin

3>配置devserver.static

4>html中引入方式

5>查看输出结构

#output中的publicPath,devServer.static.publicPath的区别

webpack.config.js配置

打包前html引用

打包后目录结构及html中引用

由上面可以看出

output.publicPath影响最后打包后动态生成的js的前缀；

devserver.static.publicPath影响静态资源在html中引用的前缀，且copyWebpackPlugin中的to的目标地址要和devserver.static.publicPath保持一致！

综上，直接所有publicPath都配置为'',则都是相对于index.html位置而言，不用过多关注是否正确；

#proxy

开发阶段常见的跨域问题，Webpack的代理功能可以帮助我们绕过浏览器的同源策略限制；

#常见配置：

    proxy: {
       '/api': {
            target: 'https://***.com', // 目标地址
            secure: false, // 当target为https协议时，忽略安全警告，不做验证
            pathRewrite: { '^/api': '' }, // 路径重写，移除路径中的/api
            changeOrigin: true // 改变http请求头的host的值为target的值，如果后端有host来源验证，开启这个很有必要。
          },
    },

#多个路径指向一个代理目标

    proxy: [
      {
        context: ['/auth', '/api'],
        target: 'http://localhost:3000',
      },
    ],

注意事项：默认情况下不会代理对 root 的请求！！！！在工程中如果配置了baseUrl 则在启动开发环境时代理策略会直接忽略，所以请区分环境来确定baseUrl的值！！

#其他常用dev-server配置：

#dev-server原理：

上图基本上是dev-server的一个大概运作机制：

绿色： webpack实例的控制区域

蓝色：dev-server控制区域

红色：本地源码/静态资源

青色：浏览器

1：dev-server启动时会初始化一个webpack的compiler实例，用于监听源码更改，并编译成浏览器可以识别的资源，供express服务使用

2：webpack编译后别的资源，供express服务（一个提供读，取，写静态资源的服务）使用；dev-middleware下有一个关键插件 memfs(memory fileSystem)，这个插件的作用‘模拟磁盘资源的读取，但是资源是存在内存中，提高资源响应效率’；

3：dev-middleware 还做了一个事情就是监听工程项目中没有参与编译的一些assets文件，一旦更新会周知浏览器刷新页面；

4：sock和socket-client 2个插件，将浏览器端和express服务端建立长连接双工通信；上箭头：初始时传送webpack已经编译完毕的status; webpack-dev-server/client获取到已经编译完毕的状态后，执行下箭头：获取更改的hash值；再执行上箭头，将hash值给到webpack-dev-server/client；但真正需要更新的实际资源，以及怎么更新的处理逻辑不在此处处理；而是走第5步，交由 webpack/hot/dev-server去处理；（目的是解耦，少了dev-server使用其他方法/插件也能实现更新）

5：webpack/hot/dev-server拿到4给的最新hash值后，先做一个check；结合webpack.config.js中的hot配置，如果是false,直接进入第11步，直接刷新页面；否则进入第6步进行热更新；

6: HotModuleReplacement Runtime 是热更新（HMR服务）的中枢；利用JsonMainTemplate Runtime工具；来实现资源的获取；

7：中枢拿着最新的hash值给 JsonMainTemplate Runtime工具指令，来换取最新需要更改的模块hash值以及对应真正的资源；

8：下箭头：向express服务发送alax请求。服务会将所有需要更新的hash值组装json/manifest文件返回回去；执行上箭头

9：再次执行下箭头：拿到这个json文件后再向服务器发送jsonp请求，获取真正需要更新的资源文件；执行上箭头；将资源及json文件给到 7 中枢；

10：中枢将最新json及资源给 HotModulePlugin 工具指令，此工具将会进行新旧模块对比，再决定是否需要更新，如果需要更新，则在更新模块的同时也需要更新模块之间的引用；

11：更新完毕后页面刷新；

#devserver和react项目相结合对应配置：

create-react-app脚手架搭建的项目，关于webpack的配置内置在react-scripts插件里，如果要想配置需要先执行 npm run eject ,则项目根目录下就会有个config文件夹，webpack.config.js文件中可配置对应选项；（参考 eject 说明）
当然上面这种命令执行后是不可逆的，如果不想破坏原来脚手架react-script的这些配置，我们可以使用第三方插件，比如carco，这样就直接在项目根目录下新建 carco.config.js ，在这个文件中进行webpack的配置；（参考 craco ）
如果是手动创建一个react项目，那就直接在项目根目录下直接创建 webpack.config.js配置文件，直接配置就好。当然前提是你需要先 npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin 对应一系列插件。