Webpack Integration

This page is the Part.2 of configuration, we will add a middleware in dev-server to receives API from Inspector Component, and call your local IDE/Editor to open the source file from server side. Please make sure you have already added the Inspector Component in your project as Part.1.

In this section, follow the simple setup below to integrate react-dev-inspector into your Webpack (opens in a new tab) project.

Setup

At first install the package:

npm i -D @react-dev-inspector/middleware

This package provides a launchEditorMiddleware, just add it in your webpack config's middlewares.

Note: Place launchEditorMiddleware as far forward in the middleware sequence as possible, before other middlewares.

For example, use with setupMiddlewares (opens in a new tab) in Webpack 5 likes:

const { launchEditorMiddleware } = require('@react-dev-inspector/middleware')
 
module.exports = {
  ...
 
  devServer: {
    setupMiddlewares(middlewares) {
      middlewares.unshift(launchEditorMiddleware)
      return middlewares
    },
  },
}

Use with devServer.before (opens in a new tab) in Webpack 4 likes:

const { launchEditorMiddleware } = require('@react-dev-inspector/middleware')
 
module.exports = {
  ...
 
  devServer: {
    before: (app, server, compiler) => {
      app.use(launchEditorMiddleware)
    },
  },
}