javascript 带有绕过代理的 Webpack-dev-server
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26785268/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webpack-dev-server with bypass proxy
提问by CoderTR
How to achieve a 'proxy' (similar to grunt-connect-proxy) option with webpack-dev-server ?
如何使用 webpack-dev-server实现“代理”（类似于grunt-connect-proxy）选项？
I am using webpackand webpack-dev-serverwith Grunt. A task in Gruntfile.js (below code) is able to start the server on port 8080. I want to add proxy setup for all the backend data requests (context URL /ajax/*).
我在Grunt 中使用webpack和webpack-dev-server。Gruntfile.js 中的一个任务（下面的代码）能够在端口 8080 上启动服务器。我想为所有后端数据请求（上下文 URL /ajax/*）添加代理设置。
"webpack-dev-server": {
options: {
webpack: webpackConfig,
publicPath: "/src/assets"
},
start: {
keepAlive: true,
watch: true
}
}
回答by Martin Gr?ber
In the webpack config, you can use devServer.proxy like this:
在 webpack 配置中，你可以像这样使用 devServer.proxy：
proxy: {
'/ajax/*': 'http://your.backend/'
}
回答by CoderTR
I ended up using 'grunt-contrib-connect' and 'grunt-connect-proxy' with 'webpack-dev-middleware'. So, I can have proxy middleware to handle all my data requests and webpack middleware to handle static bundle file requests.
我最终将“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 TASK ----
---- 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')
];
}
}
}
}
回答by zirho6
Webpack dev server proxy api has been changed since v1.15
Webpack 开发服务器代理 api 自 v1.15 以来已更改
https://github.com/webpack/webpack-dev-server/issues/562
https://github.com/webpack/webpack-dev-server/issues/562
glob * should be ** to proxy all request
glob * 应该是 ** 来代理所有请求
devServer: {
proxy: {
'**': 'http://local.ui.steelhouse.com/'
},
}
回答by Daniel Shih
webpack-dev-server didn't know how to deal with your content, so it has a config which can proxy all your request to specific server handle content.
webpack-dev-server 不知道如何处理您的内容，因此它有一个配置，可以将您的所有请求代理到特定的服务器处理内容。
for example:
例如：
you should run 'grunt content' to start your content server then run 'grunt serve' to start develop
你应该运行“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', []);
};