How to use webpack in hot mode - reactjs

Question

i'm using in my react project a library that needs to be compiled using webpack ( the library called storm-react-diagrams)
the problem is , whenever i do some changes in the library , i need to compile it using webpack , then restart the react app using npm start in order for the changes to take effect (the generated bundle.js doesn't get updated untill i use npm start ) .
How can i optomize this and just refresh the page automaticly whenever i edit the app or the library
for info :
I'm using VS code
when changing and saving a file on my react app , the page on the browser reloads and changes take effect with no problem .
unfortuanatly , this doesn't happen when i change a file in node_modules folder
webpack config file
const webpack = require("webpack");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
var path = require("path");
var plugins = [];
const production = process.env.NODE_ENV === "production";
//do we minify it all
if (production) {
console.log("creating production build");
plugins.push(
new webpack.DefinePlugin({
"process.env.NODE_ENV": '"development"'
})
);
}
/**
* #author Dylan Vorster
*/
module.exports =
//for building the umd distribution
{
entry: "./src/main.ts",
output: {
filename: "main.js",
path: __dirname + "/dist",
libraryTarget: "umd",
library: "storm-react-diagrams"
},
externals: {
react: {
root: "React",
commonjs2: "react",
commonjs: "react",
amd: "react"
},
"react-dom": {
root: "ReactDOM",
commonjs2: "react-dom",
commonjs: "react-dom",
amd: "react-dom"
},
lodash: {
commonjs: "lodash",
commonjs2: "lodash",
amd: "_",
root: "_"
}
},
plugins: plugins,
module: {
rules: [
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
},
{
test: /\.tsx?$/,
loader: "ts-loader"
}
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
devtool: production ? "source-map" : "cheap-module-source-map",
};