webpack-dev-server【devServer属性配置】

前言：DevServer是webpack开发服务器。webpack-dev-server：是一个本地开发服务器，会自动监听变化，自动打包构建，自动更新刷新浏览器特点：不会产生dist文件，将打包结果暂时存在内存中，内部的http-sever访问这些文件并读取数据，发送给浏览器减少磁盘的读取，提高构建效率写法：在webpack.config.js文件中，通过属性devServer: { } 设置与

JIseven

17037人浏览 · 2021-11-12 18:01:54

JIseven · 2021-11-12 18:01:54 发布

前言：

DevServer 是webpack开发服务器。

webpack-dev-server：是一个本地开发服务器，会自动监听变化，自动打包构建，自动更新刷新浏览器

特点：

不会产生dist文件，将打包结果暂时存在内存中，内部的http-sever访问这些文件并读取数据，发送给浏览器
减少磁盘的读取，提高构建效率

写法：在webpack.config.js文件中，通过属性devServer: { } 设置与 webpack-dev-server相关的配置

安装：下载安装webpack-dev-server库
$ npm i -D webapck-dev-server

配置package.json 和 webpack.config.js

当运行 npm run dev 的时候，devServer首先会在内存中创建类似的dist目录，这里不会看到生成的dist打包文件，是因为webpack-dev-server是将打包编译结果放在内存中，内部的http-sever会访问这些文件并读取数据，再发送给浏览器，由浏览器打开进行预览。

webpack-dev-server其它配置

mode: 'development',
entry: {},
output: {},
devtool:'#source-map',
module: {rules: []},
devServer: {
    contentBase: resolve('./'), // 对外提供的访问内容的路径，只有在提供静态文件访问的情况下才需要使用该配置。
    compress: true, // 配置是否启用 gzip 压缩。boolean 为类型，默认为 false。
    host: 'localhost' || baseDevServer.host,
    inline: true, // 切换dev-server的两种模式，默认情况server使用inline mode(live reload及构建信息的相关代码会被插入到bundle中。)。
       // false:切换到iframe mode(使用iframe mode会在通知栏下方显示构建信息)
    port: baseDevServer.port || 9000,
    quiet: true, // 当启用该配置，除了初始化信息会被写到console中，其他任何信息都不会被写进去。
                // errors和warnings也不会被写到console中。
    useLocalIp: baseDevServer.useLocalIp || false,
    overlay: { // 在编译过程中有任何错误，可以显示在网页上,在浏览器上全屏显示编译的errors或warnings。默认是关闭的
      warnings: false,
      errors: true
    },
    headers: { // 向所有的请求添加headers
      "X-Custom-Foo": "bar"
    },
    historyApiFallback: true, // 当使用html5 history api,将会在响应404时返回index.html。
    historyApiFallback: { 
       rewrites: [ // 通过传递一个object来对该共呢个做更多的定
         { from: /^\/$/, to: '/views/landing.html' },
         { from: /^\/subpage/, to: '/views/subpage.html' },
         { from: /./, to: '/views/404.html' }
       ],
       disableDotRule: true // 当在路径中使用.符号，需要使用disableDotRule配置。
    },
    https: true, // 默认情况下dev-server使用http协议，通过配置可以支持https
    https: {
       key: fs.readFileSync("/path/to/server.key"),
       cert: fs.readFileSync("/path/to/server.crt"),
       ca: fs.readFileSync("/path/to/ca.pem"),
    },
    open: false, // 第一次构建是否自动用浏览器打开网页，默认是true
    openPage: '/different/page', // 配置项用于打开指定 URL 的网页
    hot: true, // 开启热更新HMR，只能跟新css。js和图片需要手动更新
    hotOnly:true, 启用HMR，当编译失败时，不刷新页面。
    proxy: {
     '/api': {
         target: 'https://api.github.com', // 代理地址
         pathRewrite: {
           '^/api': ''
         },
         // 默认代理服务器，会以我们实际在浏览器请求的主机名【localhost:8080】，作为代理服务器的主机名，
         // 然后代理服务器会带上这个主机名，去请求github，然而 github是不认识 【localhost:8080】
         //  changeOrigin: true 就是以实际代理请求发生过程中的主机名去请求，如：代理服务器的主机名
         changeOrigin: true
      }
   }
},
resolve: {
   extensions: ['.js', '.vue', '.json'],
   alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('./')
   }
},
plugins: [
   new webpack.HotModuleReplacementPlugin() // HMR 特性所需要的插件
]

1: 打开指定 URL 网页：

devServer设置：openPage: '/different/page' 也可以配置package.json:达到一样的效果

2: 开启热跟新HMR【适用于开发模式，不适用生产模式】

devServer设置：hot: true 也可以配置package.json:达到一样的效果

我的IP地址是：10.10.42.3。那么像上图这样配置后，

局域网内其它机器需要访问：10.10.42.3:8080 。

本机访问：10.10.42.3:8080 或者 localhost:8080 或者 127.0.0.1:8080

HMR：

现象：就是你修改代码保存之后，浏览器不会刷新，只会修改你更改过的依赖代码。

好处：提升开发效率，即你不用手动刷新浏览器，就可以保持浏览器状态

内容拓展： 我们使用webpack-dev-server开启一个开发服务，webpack内部实现watch，当文件发生修改，就重新 ”打包““编译” 保存在内存中，webpack-dev-server依赖中间件webpack-dev-middleware来与webpack进行交互，如果文件变化了，没有配置热更新，webpack-dev-server就会通知浏览器进行刷新。启动开发服务后，浏览器和服务端是通过websocket来进行长链接的，可以自己在network里面看👀【服务端返回hash，热更新通过hash来判断，“配置了热跟新” 先执行”热跟新“，如果失败执行“刷新”，如果配置了hotOnly：即使 “热更新” 失败，也不刷新】

简单概括：大概流程是我们用webpack-dev-server启动一个服务之后，浏览器和服务端是通过websocket进行长连接，webpack内部实现的watch就会监听文件修改，只要有修改就webpack会重新打包编译到内存中，然后webpack-dev-server依赖中间件webpack-dev-middleware和webpack之间进行交互，每次热更新都会请求一个携带hash值的json文件和一个js，websocker传递的也是hash值，内部机制通过hash值检查进行热更新

3: 代理 proxy：当您有一个单独的API后端开发服务器，并且想要在同一个域上发送API请求时，则代理这些 url

proxy: {
    '/proxy': {
        target: 'http://your_api_server.com',
        changeOrigin: true,
        pathRewrite: {
            '^/proxy': ''
        }
}

假设你主机名为 localhost:8080 , 请求 API 的 url 是 http：//your_api_server.com/user/list
'/proxy'：如果点击某个按钮，触发请求 API 事件，这时请求 url 是http：//localhost:8080/proxy/user/list 。
changeOrigin：如果 true ，那么 http：//localhost:8080/proxy/user/list 变为 http：//your_api_server.com/proxy/user/list 。但还不是我们要的 url 。
pathRewrite：重写路径。匹配 /proxy ，然后变为'' ，那么 url 最终为 http：//your_api_server.com/user/list 。

4: 配置是否启用 gzip 压缩。

devServer设置：compress: true 也可以配置package.json:达到一样的效果

5: 通过参数让编译的输出内容带有进度和颜色： webpack --progress --colors；

webpack-cli 命令的选项比较多，详细可以通过 webpack-cli 的文档进行查阅，这里总结我们日常用的最多的几个选项（options）：
–config：指定一个 Webpack 配置文件的路径；
–mode：指定打包环境的mode，取值为development和production，分别对应着开发环境和生产环境；
–json：输mode出 Webpack 打包的结果，可以使用webpack --json > stats.json方式将打包结果输出到指定的文件；
–progress：显示 Webpack 打包进度；
–watch, -w：watch 模式打包，监控文件变化之后重新开始打包；
–color, --colors/–no-color, --no-colors：控制台输出的内容是否开启颜色；
–hot：开启 Hot Module Replacement模式，后面会详细介绍；
–profile：会详细的输出每个环节的用时（时间），方便排查打包速度瓶颈。
$ webpack -p//压缩混淆脚本，这个非常非常重要！
$ webpack -d//生成map映射文件，告知哪些模块被最终打包到哪里了其中的 