Hot-reload/fast-refresh is working when using typescript watch but not when using webpack watch

I'm after that for a whole day with no success, but maybe someone here could help.

I'm developing a lib that lays in ./ and examples demo(built with create-react-app) at ./examples/ (full structure below).

typescript (hot-reload work)

There is a typescript watch on ./src which recompiles on any change from ./src to ./lib.

The example project at ./example uses ./lib as react-xarrows component via the npm link option. means that the example code see import react-xarrow but the dist code of react-xarrows within the example is actually sym-linked to ./lib.

When the typescript process updates file in ./lib, the changes are immediately reflected to the running example app at localhost:3000.

Until here, everything worked great.

webpack (hot-reload does not work)

Typescript watch(tsc -w) is fine, but I want more control over the build files, minify and optimize the production build and so on, so I decided to move to webpack instead.

I tried replacing the typescript watch process with webpack watch process but the changes are not reflected to the dev-server(create-react-app) until I refresh the browser. WHY?. I'm updating the same `./lib file, but now with webpack and not typescript. What's the difference?

When using webpack watch: the Webpack docs state - "The only downside is that you have to refresh your browser in order to see the changes". But they say nothing about why.

requirements

• The example demo must stay uninjected create-react-app.(used as code sandbox the the project repo)

project details

File structure:

D:\Eliav\projects\git projects\react-xarrows
├── CHANGELOG.md
├── examples/
|  ├── package.json
|  ├── public/
|  ├── README.md
|  ├── src/
|  ├── tsconfig.json
|  ├── yarn.lock
|  └── __tests__/
├── LICENSE
├── package.json
├── README.md
├── lib
|  ├── index.d.ts
|  ├── index.d.ts.map
|  ├── index.js
|  ├── index.js.map
|  ├── types.d.ts
|  ├── types.d.ts.map
|  ├── types.js
|  ├── types.js.map
|  ├── utils
|  ├── Xarrow.d.ts
|  ├── Xarrow.d.ts.map
|  ├── Xarrow.js
|  └── Xarrow.js.map
├── src/
|  ├── index.tsx
|  ├── types.ts
|  ├── utils/
|  └── Xarrow.tsx
├── TODO.md
├── tsconfig.json
├── webpack.config.js
├── yarn.lock
└── _config.yml

// ./tsconfig.json

{
  "include": [
    "./src/*"
  ],
  "compilerOptions": {
    "strict": true,
    "lib": [
      "dom",
      "esnext"
    ],
    "jsx": "react",
    "noImplicitAny": false,
    "strictNullChecks": false,
    "target": "ES5",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "lib",
    "noEmit": false
  },
  "compileOnSave": true
}

// ./webpack.config.js

const path = require('path');

module.exports = (env) => {
  const mode = process.env.NODE_ENV || (env['production'] ? 'production' : null) || 'development';
  const outputFolder = mode === 'production' ? 'dist' : 'dist';
  const conf = {
    mode: `${mode}`,
    target: ['web', 'es5'],
    externals: [
      {
        react: 'react',
      },
    ],
    entry: './src/index.tsx',
    devServer: {
      hot: true,
      contentBase: './dist',
      port: 8080,
    },
    output: {
      filename: 'index.js',
      path: path.resolve(__dirname, `${outputFolder}`),
      clean: true,
      library: 'reactXarrow',
      libraryTarget: 'umd',
    },
    resolve: {
      extensions: ['.tsx', '.ts', '.js', 'jsx'],
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: ['babel-loader'],
        },
        {
          test: /\.(ts|tsx)$/,
          exclude: /node_modules/,
          use: ['ts-loader'],
        },
        {
          test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
          use: ['file-loader'],
        },
      ],
    },
  };
  if (mode === 'development') {
    conf['devtool'] = 'inline-source-map';
  }
  return conf;
};