Как использовать веб-пакет в горячем режиме - PullRequest
Новая
       11

Как использовать веб-пакет в горячем режиме

0 голосов
/ 31 мая 2018

Я использую в своем реактивном проекте библиотеку, которую нужно скомпилировать с помощью веб-пакета (библиотеки, называемой storm-реагировать-диаграммами)

проблема в том, что всякий раз, когда я делаю некоторые изменения в библиотеке, янеобходимо скомпилировать его с помощью веб-пакета, а затем перезапустить приложение реакции с помощью запуска npm, чтобы изменения вступили в силу (сгенерированный bundle.js не обновляется, пока я не использую запуск npm).

Как я могуoptomize это и просто обновлять страницу автоматически всякий раз, когда я редактирую приложение или библиотеку

для информации:

Я использую код VS

при изменении и сохранении файла вМое приложение реакции, страница в браузере перезагружается, и изменения вступают в силу без проблем.к сожалению, этого не происходит, когда я изменяю файл в папке 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",
	};
...