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

本文详细介绍了webpack-dev-server的特性、配置方法及其在开发中的作用,包括内存打包、热更新HMR、代理proxy、gzip压缩等。通过配置devServer,可以实现自动刷新浏览器、快速构建以及在开发环境中模拟API请求。此外,还提到了webpack-cli的常用命令选项,如--progress和--colors。
摘要由CSDN通过智能技术生成

前言: 

      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映射文件,告知哪些模块被最终打包到哪里了其中的 
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值