如何在热模式下使用webpack

Question

我在我的react项目中使用了一个需要使用webpack编译的库（名为storm-react-diagrams的库）

问题是，每当我在库中做一些更改时，我需要使用webpack编译它，然后使用npm start重启react应用程序，以使更改生效（生成的bundle.js不会得到更新，直到我使用npm start）。

如何在我编辑应用程序或库时自动刷新页面

获取信息：

我正在使用VS代码

在我的react应用程序上更改和保存文件时，浏览器上的页面重新加载和更改生效，没有任何问题。 不幸的是，当我更改node_modules文件夹中的文件

时，这不会发生

webpack配置文件

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",
	};