Webpack-dev-server con proxy di bypass

Question

Come ottenere un'opzione 'proxy' (simile a grunt-connect-proxy) con webpack-dev-server?

Sto usando webpack e webpack-dev-server con Grunt. Un'attività in Gruntfile.js (sotto il codice) è in grado di avviare il server sulla porta 8080. Voglio aggiungere l'installazione del proxy per tutte le richieste di dati di backend (URL di contesto/ajax/*).

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

Answer 1

Nella configurazione webpack , è possibile utilizzare devServer.proxy in questo modo:

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

Answer 2

ho finito per usare 'grugnito-contrib-connect' e 'grugnito-connect-proxy' con 'webpack-dev-middleware'. Quindi, posso avere il middleware proxy per gestire tutte le mie richieste di dati e il middleware del webpack per gestire le richieste di file bundle statici.

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

webpack-dev-server non sapeva come trattare con i contenuti, quindi ha una configurazione che può delega tutta la vostra richiesta al server specifico gestire il contenuto.

ad esempio:

si dovrebbe eseguire 'contenuti grugnito' per avviare il server di contenuti quindi eseguire 'grugnito servire' per iniziare a sviluppare

'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 server proxy dev api è stato cambiato da v1.15

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

glob * dovrebbe essere ** per delega tutte le richieste

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