How does webpack v4 handle devDependencies in production mode?

Question

I'm wondering how does webpack handle devDependencies when in production mode:

App.js

import { hot } from 'react-hot-loader';

function App() {
  // App code
}

export default process.env.NODE_ENV === 'development' ? hot(module)(App) : App;

I can successfully use a ternary into the export statement. But I can't do that and neither set a condition in the import statement.

QUESTION

What is the proper way to handle this (the import of a devDependency)?

Will webpack add devDependencies to the bundle if no condition is placed at the import?

---

EDIT:

Just found out that webpack does add devDependencies to the bundle:

This was generated with webpack mode set to production:

Answer 1

Here's how I solved it with ignorePlugin

App.js

import { hot } from 'react-hot-loader'; 

function App() {
  // App code
}

export default process.env.NODE_ENV === 'development' ? hot(module)(App) : App;

webpack.prod.js (webpack production config file)

module.exports = merge(common, {
  mode: 'production',

  plugins:[
    new webpack.IgnorePlugin(/react-hot-loader/),  // <------ WILL IGNORE THE react-hot-loader
    new webpack.HashedModuleIdsPlugin(),
    new BundleAnalyzerPlugin()
  ],

This way react-hot-loader is ignored in production mode.

In development I use another config file for webpack, which doesn't use the ignorePlugin.