A webpack plugin that compiles .proto files automatically with gRPC-Web.
Install
**Notice:** Make sure you have [`protoc`](https://github.com/protocolbuffers/protobuf/releases) and [`protoc-gen-grpc-web`](https://github.com/grpc/grpc-web/releases) installed on your OS.
```shell
npm i --save-dev grpc-webpack-plugin
```
```shell
yarn add --dev grpc-webpack-plugin
```
Usage
**webpack.config.js**
```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.}`| |
|`outputType`|Required, `'js' \| 'grpc-web'`|`{String}`| |
|`importStyle`|`'closure' \| 'commonjs' \| 'commonjs+dts' \| 'typescript'`, see [Import Style](https://github.com/grpc/grpc-web#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](https://github.com/grpc/grpc-web#wire-format-mode)|`{String}`|`'grpcwebtext'`|
|`outDir`| |`{String}`|`'.'`|
|`extra`|Other protoc options, see `protoc -h`|`{Array.}`|`[]`|
|`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](https://webpack.js.org/configuration/watch/#watch) 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**
```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),
})
),
],
};
```
