Django，ReactJS，Webpack热重载

Question

我一直在尝试使用Webpack 4来在Django中设置React组件。

为了让我开始，我阅读了以下内容：

• 使用Webpack与Django透明地工作 + 作为奖励热重新加载React组件

• 教程：Django REST和React (Django 2.0和少量测试)

这两个教程都非常好。最终，我通过遵循第二个链接获得了几乎可以工作的结果，尽管我使用Django 1.11。

在遵循第二个链接后我的问题是，在使用webpack-dev-server时热重新加载不起作用。问题在于Django无法读取webpack-dev-server的输出文件（给出404错误），而main.js可以被读取。我已经阅读到dev-server文件默认只存在于内存中。

为了解决热重新加载文件出现404错误的问题，我安装了write-file-webpack-plugin包，每次重新加载时写出文件。然后更改了webpack-config.js文件（我删除了一些行以使其更短....）：

var path = require('path');
//webpack is not needed since I removed it from plugins
//const webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var WriteFilePlugin =require('write-file-webpack-plugin');
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
    ]
  },
  entry: [
          './frontend/src/index',
          ],
  output: {
    path: path.join(__dirname, 'frontend/static/frontend'),
    // Changing the name from "[name]-[hash].js" to not get 1000 files in the static folder.
    filename: 'hotreloadfile.js'
  },
  plugins: [
    //This line writes the file on each hot reload
    new WriteFilePlugin(),
    //This can be removed.
    //new webpack.HotModuleReplacementPlugin(),
    new BundleTracker({filename: './webpack-stats.json'})
  ],
  mode:'development',
};

在我的package.json文件中，在script标签中有以下代码：

"start": "webpack-dev-server --config ./webpack.config.js",

在Django中，我使用以下settings.py代码行安装了webpack-loader:

STATIC_URL = '/static/'

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'frontend/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json')
        }
}

最后，在我称为index.js的根组件中，我不需要module.hot.accept(); 行。

您是否认为这种方法有任何缺点？除了我不得不安装另一个包之外？

为什么我不能通过 new webpack.HotModuleReplacementPlugin（）使其工作？

- Simon Johansson

---

你能解决这个问题吗？@Simon - Subhanshu

是的，我通过上述步骤成功解决了问题。不确定它是否仍然有效，但现在和那时候都有一些赞，所以该方法似乎仍然有效。 - Simon Johansson

@GwynBleidD 这个问题中并没有答案。他们在询问自己的方法是否正确，以及为什么 webpack.HotModuleReplacementPlugin() 对他们无效。这两个问题都是完全合理的。恰好他们采取了经过深入研究的方法来解决问题，对其他人非常有帮助。 - Sabito stands with Ukraine

Answer 1

如果您在React中开发前端，而在Django中开发后端，这里有另一种方法。

我有一个运行在8000端口的Django服务器和一个运行在3000端口的React服务器。

如果我在React代码的package.json文件中添加"proxy": "http://localhost:8000"一行，那么当调用API时，localhost:3000将进行热重载，而API调用将转到localhost:8000。

- discover