English | 简体中文

gRPC Webpack Plugin

A webpack plugin that compiles .proto files automatically with gRPC-Web.

Install

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

Usage

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