Webpack-dev-server mit Bypass-Proxy

Question

Wie erreicht man eine 'proxy' (ähnlich grunt-connect-proxy) Option mit webpack-dev-server?

Ich verwende webpack und webpack-dev-server mit Grunt. Eine Aufgabe in Gruntfile.js (unter Code) kann den Server auf Port 8080 starten. Ich möchte für alle Backend-Datenanforderungen eine Proxy-Einrichtung hinzufügen (Kontext-URL/ajax/*).

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

Answer 1

Im webpack Config starten zu entwickeln Sie können devServer.proxy folgendermaßen verwenden:

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

Answer 2

ich landete mit 'Grunzen-contrib-connect' und 'Grunzen-connect-proxy' mit 'webpack-dev-Middleware'. So kann ich eine Proxy-Middleware haben, um alle meine Datenanforderungen zu bearbeiten, und eine Webpack-Middleware, um statische Paketdateianforderungen zu bearbeiten.

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"   
     }); 
    }; 

---- GRUNZEN 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

webpack-dev-Server nicht wissen, wie mit dem Inhalt zu tun, so dass es eine Config hat die Proxy können alle Ihre Anfrage an spezifischen Server-Handle-Inhalt.

zum Beispiel:

Sie sollten 'Grunzen Inhalt' führen Sie Ihre Content-Server starten dann 'Grunzen dienen' laufen

'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', []); 
 
};

Answer 4

Webpack dev Server-Proxy-api ist seit v1.15

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

glob * geändert sollten alle Anfrage

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