带有旁路代理的Webpack开发服务器
Webpack-dev-server with bypass proxy
如何使用webpack dev-server实现"proxy"(类似于grunt connect proxy)选项?
我正在使用Grunt的webpack和webpack开发服务器。Gruntfile.js中的一个任务(下面的代码)能够在8080端口上启动服务器。我想为所有后端数据请求添加代理设置(上下文URL/ajax/*)。
"webpack-dev-server": {
options: {
webpack: webpackConfig,
publicPath: "/src/assets"
},
start: {
keepAlive: true,
watch: true
}
}
在webpack配置中,您可以使用devServer.proxy,如下所示:
proxy: {
'/ajax/*': 'http://your.backend/'
}
Webpack开发服务器代理api自v1.15 以来已更改
https://github.com/webpack/webpack-dev-server/issues/562
glob*应该是**来代理所有请求
devServer: {
proxy: {
'**': 'http://local.ui.steelhouse.com/'
},
}
我最终使用了带有"webpack-dev中间件"的"grunt contrib connect"answers"grunt connect proxy"。因此,我可以使用代理中间件来处理所有的数据请求,使用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"
});
};
----繁重的任务
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不知道如何处理您的内容,所以它有一个配置,可以将您的所有请求代理到特定的服务器处理内容。
例如:
您应该运行"grunt content"来启动您的内容服务器然后运行"咕哝发球"开始开发
'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开发服务器和React服务器端渲染
- webpack开发模式和生产构建模式之间有什么区别
- index.html使用webpack开发服务器未重新加载
- 如何从windows控制台停止webpack开发服务器
- 使用 Node 后端设置 webpack 热开发服务器以进行生产
- 哪个webpack开发工具适合chrome应用程序
- 如何减少 webpack 开发服务器重建时间
- 在 webpack bundle 中运行 Webpack 开发服务器
- 如何在没有 webpack 开发服务器的情况下使用 webpack 进行开发
- Webpack 开发服务器不显示内容
- 带有旁路代理的Webpack开发服务器
- webpack开发服务器的缓存问题
- Webpack不创建输出文件(不使用Webpack开发服务器)
- Webpack开发服务器路由问题
- Webpack开发服务器做重新加载,但页面没有改变
- 如何使用Webpack开发服务器部署Webpack应用程序?
- webpack开发服务器忽略scs更改
- webpack开发服务器可以'检测不到嵌套文件夹中的文件更改
- Webpack开发服务器没有't热刷新我的客户端文件
- Webpack开发服务器热模式不工作