web-dev-qa-db-fra.com

Webpack-dev-server avec proxy de contournement

Comment réaliser une option 'proxy' (similaire à grunt-connect-proxy ) avec webpack-dev-server? 

J'utilise webpack et webpack-dev-server avec Grunt. Une tâche dans Gruntfile.js (sous le code) peut démarrer le serveur sur le port 8080. Je souhaite ajouter une configuration de proxy pour toutes les demandes de données dorsales (URL de contexte/ajax/*). 

       "webpack-dev-server": {
        options: {
            webpack: webpackConfig,
            publicPath: "/src/assets"
        },
        start: {
            keepAlive: true,
            watch: true              
        }
    }
javascriptnode.jsgruntjswebpackgrunt-connect-proxy
10
CoderTR

Dans la configuration du webpack, vous pouvez utiliser devServer.proxy de la manière suivante:

proxy: {
    '/ajax/*': 'http://your.backend/'
}
21
Martin Grůber

L'API de proxy du serveur de développement Webpack a été modifiée depuis la v1.15

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

glob * devrait être ** pour adresser toutes les requêtes

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

J'ai fini par utiliser 'grunt-contrib-connect' et 'grunt-connect-proxy' avec 'webpack-dev-middleware'. Ainsi, je peux avoir un middleware de proxy pour traiter toutes mes demandes de données et un middleware de webpack pour traiter les demandes de fichiers d'ensembles statiques. 

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

---- TÂCHE DE GRUNT ---- 

        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')
                        ];
                    }
                }
            }
      }
1
CoderTR

webpack-dev-server ne savait pas comment gérer votre contenu, il a donc une configuration qui peut envoyer par proxy toute votre requête à un contenu de gestionnaire de serveur spécifique.

par exemple:

vous devez exécuter 'grunt content' pour démarrer votre serveur de contenu puis exécuter 'grunt serve' pour commencer à développer

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

0
Daniel Shih