如何实现代理' (与Web地址开发服务器类似grunt-connect-proxy)选项?
我正在使用webpack和webpack-dev-server与Grunt。 Gruntfile.js(代码下面)中的任务能够在端口8080上启动服务器。我想为所有后端数据请求添加代理设置(上下文URL / ajax / *)。
"webpack-dev-server": {
options: {
webpack: webpackConfig,
publicPath: "/src/assets"
},
start: {
keepAlive: true,
watch: true
}
}
答案 0 :(得分:21)
在webpack配置中,您可以像这样使用devServer.proxy:
proxy: {
'/ajax/*': 'http://your.backend/'
}
答案 1 :(得分:1)
我最终使用了' 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 ----
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')
];
}
}
}
}
答案 2 :(得分:1)
自v1.15以来,Webpack dev服务器代理api已经更改
https://github.com/webpack/webpack-dev-server/issues/562
glob *应该**代理所有请求
devServer: {
proxy: {
'**': 'http://local.ui.steelhouse.com/'
},
}
答案 3 :(得分:0)
webpack-dev-server不知道如何处理您的内容,因此它有一个配置,可以代理您对特定服务器处理内容的所有请求。
例如:
你应该运行' grunt内容'启动内容服务器 然后运行' 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', []);
};
&#13;