webpack 学习之 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.js 的 devServer 对象传入

// 通过 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 null或undefined继续使用代理处理请求。
• 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

…未完待续