Enable this plugin only during development mode

hey

the https://github.com/jantimon/favicons-webpack-plugin is only generating the full favicon during production mode by default. so if you set mode: "development" it will not be active unless you overrule that setting.

what about adding something similar to ReactRefreshWebpackPlugin?

the api could look like this:

// Only active during development
new ReactRefreshWebpackPlugin()

// Active for dev and prod
ReactRefreshWebpackPlugin({
  alwaysEnabled: true
})

to find out wether you are in production mode or in dev mode you can use the following snippet inside any hook:

// From https://github.com/webpack/webpack/blob/3366421f1784c449f415cda5930a8e445086f688/lib/WebpackOptionsDefaulter.js#L12-L14
    const isProductionLikeMode =
      compiler.options.mode === 'production' || !compiler.options.mode;

[jantimon]

one more idea:

can we move all of this into the plugin?

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
  // DO NOT apply the plugin in production mode!
  mode: isDevelopment ? 'development' : 'production',
  module: {
    rules: [
      // ... other rules
      {
        // for TypeScript, change the following to "\.[jt]sx?"
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          // ... other loaders
          {
            loader: require.resolve('babel-loader'),
            options: {
              // ... other options
              // DO NOT apply the Babel plugin in production mode!
              plugins: [isDevelopment && require.resolve('react-refresh/babel')].filter(Boolean),
            },
          },
        ],
      },
    ],
  },
};

We could in the afterPlugins webpack hook iterate over all loaders - search for babel and check if it contains react-refresh/babel - if not push it.

So the webpack prod(disabled)/dev(enabled) config change to add the refresh plugin would look like this:

module.exports = {
  plugins: [
     new ReactRefreshWebpackPlugin()
  ]
}

That way it would even be cli compatible e.g.:

webpack --plugin react-refresh-webpack-plugin --mode production

or

webpack-dev-server --plugin react-refresh-webpack-plugin --mode development

[morriq]

I came here from react-hot-loader, and installation steps discourages me since it forces my configuration to check whether is production or development build.

In react-hot-loader it’s written:

The webpack patch, hot, Babel plugin, @hot-loader/react-dom etc. are all safe to use in production; they leave a minimal footprint, so there is no need to complicate your configuration based on the environment. Using the Babel plugin in production is even recommended because it switches to cleanup mode.

Please consider the same.