Webpack-dev-serverで「プロキシ」( grunt-connect-proxy に類似)オプションを実現する方法は?
Gruntで webpack と webpack-dev-server を使用しています。 Gruntfile.js(以下のコード)のタスクは、ポート8080でサーバーを起動できます。すべてのバックエンドデータリクエスト(コンテキストURL/ajax/*)にプロキシセットアップを追加したいと思います。
"webpack-dev-server": {
options: {
webpack: webpackConfig,
publicPath: "/src/assets"
},
start: {
keepAlive: true,
watch: true
}
}
Webpack構成では、次のようにdevServer.proxyを使用できます。
proxy: {
'/ajax/*': 'http://your.backend/'
}
Webpack開発サーバープロキシAPIはv1.15から変更されました
https://github.com/webpack/webpack-dev-server/issues/562
すべてのリクエストをプロキシするには、glob *を**にする必要があります
devServer: {
proxy: {
'**': 'http://local.ui.steelhouse.com/'
},
}
「webpack-dev-middleware」で「grunt-contrib-connect」と「grunt-connect-proxy」を使用することになりました。したがって、すべてのデータ要求を処理するプロキシミドルウェアと、静的バンドルファイル要求を処理する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"
});
};
---- 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')
];
}
}
}
}
webpack-dev-serverはコンテンツの処理方法を知らなかったため、すべてのリクエストを特定のサーバー処理コンテンツにプロキシできる構成があります。
例えば:
「gruntcontent」を実行してコンテンツサーバーを起動してから、「gruntserve」を実行して開発を開始する必要があります
'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', []);
};