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

• [ ] Add some hooks
• [ ] Support Webpack 5