欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

webpack 学习之 devServer

程序员文章站 2023-12-30 10:38:10
devServer 在开发模式下提供本地服务器环境它提供实时更新加载功能,极大提高我们本地开发的效率。1.使用使用时需要使用npm安装// 安装npm install webpack-dev-server --save-devwebpack-dev-server 的配置项可以通过CLI传入// 通过 CLIwebpack-dev-server --contentBase /path/to/content/dir也可以通过 webpack.config.js 的 devServer 对象...

devServer 在开发模式下提供本地服务器环境

它提供实时更新加载功能,极大提高我们本地开发的效率。

1.使用

使用时需要使用npm安装

// 安装
npm install webpack-dev-server --save-dev

webpack-dev-server 的配置项可以通过CLI传入

// 通过 CLI
webpack-dev-server --contentBase /path/to/content/dir

也可以通过 webpack.config.jsdevServer 对象传入

// 通过 webpack.config.js 配置
const path = require('path')
moudle.exports = {
 	//...
	devSever : {
		contentBase: path.join(__dirname, 'dist')
		// ...
	}
}

2.常用配置项

devServer.host string = 'localhost'

指定要使用的主机,如果想让外部访问本机服务器,应设置为 '0.0.0.0'

module.exports = {
  //...
  devServer: {
    host: '0.0.0.0'
  }
};

devServer.port number

指定使用的端口

module.exports = {
  //...
  devServer: {
    port: 3001
  }
};

devServer.proxy object [object, function]

配置 API requests 代理相关

如果你想把你的请求代理到 localhost:3000 ,可以如下设置

// webpack.config.js
module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
};

一个 /api/users 的 request 将会代理到 http://localhost:3000/api/users

如果你不希望传递 /api,可以通过 pathRewrite 参数重写路径

// webpack.config.js
module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {'^/api' : ''}
      }
    }
  }
};

一般情况下,一个使用无效证书的HTTPS是不允许被使用的。如果需要配置的话,可以通过 secure 进行配置

// webpack.config.js
module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        secure: false
      }
    }
  }
};

如果有一些内容不想被代理,可以通过bypass属性传入一个函数,并返回对应处理的值
在函数里面,可以访问到 request,respond 和 proxyOptions参数。

  • return nullundefined继续使用代理处理请求。
  • return false会为请求产生404错误。
  • retrun 提供服务的路径,而不是继续代理请求。

例如: 对于浏览器请求,您想要提供HTML页面,但是对于API请求,您想要代理它。 您可以执行以下操作:

// webpack.config.js
module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        bypass: function(req, res, proxyOptions) {
          if (req.headers.accept.indexOf('html') !== -1) {
            console.log('Skipping proxy for browser request.');
            return '/index.html';
          }
        }
      }
    }
  }
};

如果要代理到同一目标的多个特定路径,则可以使用带有content属性的一个或多个对象的数组:

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: [{
      context: ['/auth', '/api'],
      target: 'http://localhost:3000',
    }]
  }
};

请注意,默认情况下不会代理对root的请求。 要启用根代理,应将devServer.index选项指定为伪造值:

// webpack.config.js
module.exports = {
  //...
  devServer: {
    index: '', // specify to enable root proxying
    host: '...',
    contentBase: '...',
    proxy: {
      context: () => true,
      target: 'http://localhost:1234'
    }
  }
};

默认情况下,代理时会保留主机的来源,可以将changeOrigin设置为true来覆盖此行为。

// webpack.config.js
module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
};

devServer.historyApiFallback boolean = false object

…未完待续

本文地址:https://blog.csdn.net/qq_31598771/article/details/107491413

相关标签: 前端学习

上一篇:

下一篇: