Webpack-dev-server với proxy bỏ qua

Question

Làm thế nào để đạt được tùy chọn 'proxy' (tương tự như grunt-connect-proxy) với webpack-dev-server?

Tôi đang sử dụng webpack và webpack-dev-server với Grunt. Một nhiệm vụ trong Gruntfile.js (bên dưới mã) có thể khởi động máy chủ trên cổng 8080. Tôi muốn thêm thiết lập proxy cho tất cả các yêu cầu dữ liệu phụ trợ (URL ngữ cảnh/ajax/*).

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

Answer 1

Trong cấu hình webpack , bạn có thể sử dụng devServer.proxy như thế này:

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

Answer 2

Tôi đã sử dụng 'grunt-contrib-connect' và 'grunt-connect-proxy' bằng 'webpack-dev-middleware'. Vì vậy, tôi có thể có phần mềm trung gian proxy để xử lý tất cả các yêu cầu dữ liệu của tôi và phần mềm trung gian webpack để xử lý các yêu cầu tệp bó tĩnh.

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 không biết làm thế nào để đối phó với nội dung của bạn, vì vậy nó có một cấu hình mà có thể ủy quyền tất cả các bạn yêu cầu nội dung xử lý máy chủ cụ thể.

ví dụ:

bạn nên chạy 'nội dung grunt' để bắt đầu máy chủ nội dung của bạn sau đó chạy 'grunt phục vụ' để bắt đầu phát triển

'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 máy chủ proxy api đã được thay đổi kể từ v1.15

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

glob * nên ** để proxy tất cả các yêu cầu

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