Question

我正在尝试使用带有React前端的Python Flask。这是我的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

我正在使用 webpack版本：3.8.1，节点版本：6.11.5， npm版本：3.10.10

我似乎无法弄清楚它为什么不重装。我在一个终端运行python app.py，在另一个终端运行webpack --watch。

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

如果有人能指出问题或分叉/向回购公司制作PR，那就太棒了

Answer 1

有了watch，您只需要自己编译更新，而不与应用程序交互。

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

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

热模块重装需要使用某种附加工具（例如Webpack HMR）和已配置的Webpack Dev Server来完成。

在文档中，热重载需要以下所有条件：

应用程序要求HMR运行时检查更新。运行时异步下载更新并通知应用程序。然后，应用程序要求运行时应用更新。运行时将同步应用更新。

Flask React应用程序不热重新加载

1 个答案: