Webpack-dev-сервер с байпасным прокси

Question

Как достичь «прокси» (аналогично grunt-connect-proxy) с помощью webpack-dev-сервера?

Я использую 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

Я закончил с использованием 'хрюкать-вно-Коннект' и 'хрюканье-подключения прокси' с 'WebPack-DEV-промежуточного слоя'. Таким образом, у меня может быть промежуточное ПО прокси для обработки всех моих запросов данных и промежуточного программного обеспечения 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') 
         ]; 
        } 
       } 
      } 
     } 

Answer 3

WebPack-DEV-сервер не знает, как бороться с вашим контентом, поэтому он имеет конфигурации, которая может замещать все ваши запросить конкретное содержимое дескриптора сервера.

, например:

вы должны запустить 'содержание черновую', чтобы запустить сервер контента затем запустить 'хрюкать служить', чтобы начать развивать

'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 прокси-сервера апи изменилась с тех пор v1.15

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

Glob * должны быть ** проксировать все запроса

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