带有旁路代理的Webpack-dev服务器

Question

如何使用webpack-dev-server实现'proxy'（类似于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              
        }
    } 

Answer 1

在webpack配置中，您可以像这样使用devServer.proxy：

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

Answer 2

我最终使用'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')
                        ];
                    }
                }
            }
      }

Answer 3

自v1.15以来，Webpack dev服务器代理api已更改

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

glob *应该**来代理所有请求

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

Answer 4

webpack-dev-server不知道如何处理您的内容，因此它有一个配置，可以代理您对特定服务器句柄内容的所有请求。

例如：

你应该运行'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', []); };