reactjswebpackreact-hot-loader

How does webpack v4 handle devDependencies in production mode?


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:

enter image description here


Solution

  • 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()
      ],
    

    enter image description here

    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.