How does webpack v4 handle devDependencies in production mode? - reactjs

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.

Answer 2

You can have two new files for app, app.dev.js and app.prod.js while in app you just switch the require based on env.
// App.js
let App;
if (process.env.NODE_ENV === 'development') {
App = require('./app.dev.js')
} else {
App = require('./app.prod.js')
}
export default App
EDIT:
It's essential that require is used instead of import as only require can be used dynamically like this.