带有旁路代理的Webpack-dev-server

如何使用webpack-dev-server实现“代理”(类似于grunt-connect-proxy )选项?

我正在使用Grunt使用webpack和webpack-dev-server 。 Gruntfile.js中的一个任务(下面的代码)能够在端口8080上启动服务器。我想为所有后端数据请求(上下文URL / ajax / *)添加代理设置。

"webpack-dev-server": { options: { webpack: webpackConfig, publicPath: "/src/assets" }, start: { keepAlive: true, watch: true } } 

在webpackconfiguration中,你可以像这样使用devServer.proxy:

 proxy: { '/ajax/*': 'http://your.backend/' } 

我最终使用'grunt-contrib-connect'和'grunt-connect-proxy'与'webpack-dev-middleware'。 所以,我可以使用代理中间件处理所有的数据请求和webpack中间件来处理静态绑定文件请求。

  var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest; var mountFolder = function (connect, dir) { return connect.static(require('path').resolve(dir)); }; var prepareDevWebpackMiddleware = function() { webpackConfig.devtool = "eval-source-map"; var compiler = webpack(require("./webpack.config.js")); return webpackDevMiddleware(compiler, { publicPath : "/assets" }); }; 

—- GRUNT任务—-

  connect: { options: { port: 8080, hostname: 'localhost', livereload : true }, proxies: [{ context: '/api', host: 'localhost', port: 8000 }], livereload: { options: { middleware: function (connect) { return [ prepareDevWebpackMiddleware(), proxySnippet, mountFolder(connect, 'src') ]; } } } } 

webpack-dev-server不知道如何处理你的内容,所以它有一个可以代理你的请求到特定的服务器句柄内容的configuration。

例如:

你应该运行“grunt content”来启动你的内容服务器,然后运行“grunt serve”开始开发

 'use strict'; var webpackDistConfig = require('./webpack.dist.config.js'), webpackDevConfig = require('./webpack.config.js'); var mountFolder = function (connect, dir) { return connect.static(require('path').resolve(dir)); }; module.exports = function (grunt) { // Let *load-grunt-tasks* require everything require('load-grunt-tasks')(grunt); // Read configuration from package.json var pkgConfig = grunt.file.readJSON('package.json'); grunt.initConfig({ pkg: pkgConfig, webpack: { options: webpackDistConfig, dist: { cache: false } }, 'webpack-dev-server': { options: { hot: true, port: 8000, webpack: webpackDevConfig, publicPath: '/assets/', contentBase: {target : 'http://localhost:13800'}, }, start: { keepAlive: true, } }, connect: { options: { port: 8000, keepalive: true, }, proxies: [ { context: '/', host: '127.0.0.1', port: 8031, https: false, xforward: false } ], dev: { options: { port : 13800, middleware: function (connect) { return [ mountFolder(connect, pkgConfig.src), require('grunt-connect-proxy/lib/utils').proxyRequest ]; } } }, dist: { options: { middleware: function (connect) { return [ mountFolder(connect, pkgConfig.dist), require('grunt-connect-proxy/lib/utils').proxyRequest ]; } } } }, open: { options: { delay: 500 }, dev: { path: 'http://localhost:<%= connect.options.port %>/webpack-dev-server/' }, dist: { path: 'http://localhost:<%= connect.options.port %>/' } }, karma: { unit: { configFile: 'karma.conf.js' } }, copy: { dist: { files: [ // includes files within path { flatten: true, expand: true, src: ['<%= pkg.src %>/*'], dest: '<%= pkg.dist %>/', filter: 'isFile' }, { flatten: true, expand: true, src: ['<%= pkg.src %>/styles/*'], dest: '<%= pkg.dist %>/styles/' }, { flatten: true, expand: true, src: ['<%= pkg.src %>/images/*'], dest: '<%= pkg.dist %>/images/' }, ] } }, clean: { dist: { files: [{ dot: true, src: [ '<%= pkg.dist %>' ] }] } } }); grunt.registerTask('serve', function (target) { if (target === 'dist') { return grunt.task.run(['configureProxies', 'build', 'open:dist', 'connect:dist']); } grunt.task.run([ 'open:dev', 'webpack-dev-server' ]); }); grunt.registerTask('content', ['configureProxies', 'connect:dev']); grunt.registerTask('test', ['karma']); grunt.registerTask('build', ['clean', 'copy', 'webpack']); grunt.registerTask('default', []); }; 

Webpack开发服务器代理API已经改变了自v1.15

https://github.com/webpack/webpack-dev-server/issues/562

glob *应该是**代理所有的请求

  devServer: { proxy: { '**': 'http://local.ui.steelhouse.com/' }, }