javascript - Flask React 应用程序不热重载

Question

我正在尝试将 Python Flask 与 React 前端结合使用。这是我的 webpack 文件:

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: [
    "./js/app.jsx",
    "./scss/main.scss"
  ],
  output: {
    path: __dirname + '/static',
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        },
        exclude: /node_modules/
      },
      { // sass / scss loader for webpack
        test: /\.(sass|scss)$/,
        loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
      }
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new ExtractTextPlugin({ // define where to save the file
      filename: '[name].bundle.css',
      allChunks: true,

    })  
  ]
};

我不确定这个文件是否有问题，但由于某种原因，我的应用程序无法热重载。这是我设置的一个简单的存储库，热重载不起作用:https://github.com/rishub/Flask_React

我正在使用网页包版本:3.8.1， Node 版本:6.11.5，npm 版本:3.10.10

我似乎无法弄清楚为什么它没有重新加载。我在一个终端中运行 python app.py，在另一个终端中运行 webpack --watch。

带有 webpack 的终端似乎检测到 React jsx 文件的更改，但是，除非我强制刷新，否则应用程序不会在浏览器上重新加载，即使是常规刷新刷新不起作用。

如果有人能够指出问题或 fork /向存储库提出 PR，那就太好了

Answer 1

使用 watch ，您只需编译更新本身，而不与应用程序交互。

--watch 不是浏览器中热重载的标志。它会管理已注册的文件以进行更改，并在这些文件发生更改时重新编译 Webpack 输出。但是，它不一定将该输出转发到浏览器。

您的强制刷新正在与 Webpack 提供的新版本同步，并且还会破坏浏览器缓存。

热模块重新加载需要使用某种附加工具来完成，例如 Webpack HMR和配置好的 Webpack 开发服务器。

根据文档，热重载需要满足以下所有条件:

The application asks the HMR runtime to check for updates. The runtime asynchronously downloads the updates and notifies the application. The application then asks the runtime to apply the updates. The runtime synchronously applies the updates.