Grpc-webpack-plugin NPM

Notice: Make sure you have protoc and protoc-gen-grpc-web installed on your OS.

npm i --save-dev grpc-webpack-plugin

yarn add --dev grpc-webpack-plugin

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/,
  },
});

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.

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