Как webpack v4 обрабатывает devDependencies в производственном режиме?

Question

Мне интересно, как Webpack обрабатывает devDependencies в рабочем режиме:

App.js

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

function App() {
  // App code
}

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

Я могу успешно использовать троичный в выражении export. Но я не могу этого сделать, и ни один из них не устанавливает условия в операторе import.

ВОПРОС

Как правильно обращаться с этим (импорт devDependency)?

Добавит ли веб-пакет devDependencies к комплекту, если при импорте нет условий?

---

EDIT:

Только что обнаружил, что веб-пакет добавляет devDependencies в пакет:

Это было сгенерировано с веб-пакетом mode, установленным на production:

Answer 1

Вот как я решил это с помощью 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 (файл конфигурации производства веб-пакета)

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

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

Таким образом react-hot-loader игнорируется в рабочем режиме.

В разработкеЯ использую другой файл конфигурации для веб-пакета, который не использует ignorePlugin.

Answer 2

Вы можете иметь два новых файла для приложения: app.dev.js и app.prod.js, в то время как в приложении вы просто переключаете требование в зависимости от 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:

Важно, чтобы вместо импорта использовался require, поскольку динамически можно использовать только require, как этот.