English | 简体中文
Install
Notice: Make sure you have protoc and protoc-gen-grpc-web installed on your OS.
npm i --save-dev grpc-webpack-pluginyarn add --dev grpc-webpack-pluginUsage
webpack.config.js
const GrpcWebPlugin = require('grpc-webpack-plugin');
const path = require('path');
const DIR = path.resolve(__dirname, './protos');
const OUT_DIR = path.resolve(__dirname, './generated');
module.exports = {
mode: 'development',
plugins: [
// Proto messages
new GrpcWebPlugin({
protoPath: DIR,
protoFiles: ['echo.proto'],
outputType: 'js',
importStyle: 'commonjs',
binary: true,
outDir: OUT_DIR,
}),
// Service client stub
new GrpcWebPlugin({
protoPath: DIR,
protoFiles: ['echo.proto'],
outputType: 'grpc-web',
importStyle: 'commonjs+dts',
mode: 'grpcwebtext',
outDir: OUT_DIR,
}),
],
// In addition, you can debug your options by adding the following configuration
// Require webpack>=4.37
infrastructureLogging: {
level: 'error',
debug: /GrpcWebPlugin/,
},
});Options
| Name | Description | Type | Default |
|---|---|---|---|
protoPath |
Required, e.g. './protos'
|
{String} |
|
protoFiles |
Required, e.g. ['foo.proto', 'bar.proto']
|
{Array.<string>} |
|
outputType |
Required, 'js' | 'grpc-web'
|
{String} |
|
importStyle |
'closure' | 'commonjs' | 'commonjs+dts' | 'typescript', see Import Style
|
{String} |
'closure' |
binary |
Enable it to serialize and deserialize your proto from the protocol buffers binary wire format | {Boolean} |
false |
mode |
'grpcwebtext' | 'grpcweb', see Wire Format Mode
|
{String} |
'grpcwebtext' |
outDir |
{String} |
'.' |
|
extra |
Other protoc options, see protoc -h
|
{Array.<string>} |
[] |
synchronize |
Sync generated codes with .proto files each time you run webpack, disable it if you want to keep your generated codes read-only |
{Boolean} |
true |
watch |
Watch .proto files and recompile whenever they change. Only works if synchronize is true. (Need to turn on webpack watch mode first) |
{Boolean} |
true |
Notice: commonjs+dts and typescript importStyle only works with grpc-web outputType.
Advanced
You can compile multiple .proto files and put the generated code into separate folders like this:
webpack.config.js
module.exports = {
plugins: [
...['foo', 'bar', 'baz'].map(
protoName =>
new GrpcWebPlugin({
protoPath: path.resolve(__dirname, './protos'),
protoFiles: [`${protoName}.proto`],
outputType: 'grpc-web',
importStyle: 'typescript',
mode: 'grpcwebtext',
outDir: path.join(__dirname, 'generated', protoName),
})
),
],
};Todo
- [ ] Add some hooks
- [ ] Support Webpack 5