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

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

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

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

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

Я использую код 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",
 };

0 ответов

Другие вопросы по тегам