webpack-merge entry point

Question

I have broken up my webpack config files in to 3 separate files as suggested in webpack 4.1 docs using webpack-merge to merge them together.

• webpack.common.js
• webpack.dev.js
• webpack.prod.js

The problem I'm running into is i'm using webpack-dev-middleware & webpack-hot-middleware and I only need to have this in webpack.dev.js which I do but the entry point requires the use of

  entry: [
    `${ROOT_DIR}/js/index`,
    'webpack-hot-middleware/client'
  ],

And thats in my webpack.common.js file. This means that prod and dev are going to have the 'webpack-hot-middleware/client' in their entry points. How can I get around only having 'webpack-hot-middleware/client' in dev enry point and not in prod, using my setup with webpack-merge ?

I tried adding the entry in common with just this.

  entry: [
    `${ROOT_DIR}/js/index`
  ]

then in webpack.dev entry: [ ${ROOT_DIR}/js/index, 'webpack-hot-middleware/client' ],

but that just caused duplication errors.

Answer 1

Stuff in common is used in both dev & prod. So only include 'webpack-hot-middleware/client' in the dev entry, it'll automatically get merged with the entry for index from common.