通过Django模板更换网页包热模块_Django_Reactjs_Webpack

通过Django模板更换网页包热模块

django reactjs webpack

通过Django模板更换网页包热模块,django,reactjs,webpack,Django,Reactjs,Webpack,我正在尝试为通过Django的模板系统提供服务的捆绑前端静态资产设置热模块替换，如果可能的话。我目前正在通过livereload刷新页面，只要编译的资产发生更改，但编译时间越来越长，任何CSS更改都会触发整个页面的重新加载下面是Django中模板文件的示例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title>

我正在尝试为通过Django的模板系统提供服务的捆绑前端静态资产设置热模块替换，如果可能的话。我目前正在通过livereload刷新页面，只要编译的资产发生更改，但编译时间越来越长，任何CSS更改都会触发整个页面的重新加载

下面是Django中模板文件的示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- Header Links -->
  </head>
  <body>
    <div id="app"></div>

    <script type="text/javascript">
      window.CONFIG = {
        /** Injected application configuration from Django. */
      };
    </script>

    <!-- Webpack bundle url -->
    <script src="{{ bundle_url }}"></script>

  </body>
</html>

开始脚本：

'use strict';

// Crashes the script on unhandled rejections instead of silently ignoring.
process.on('unhandledRejection', (error) => { throw error; });

process.env.NODE_ENV = 'development';

// Vendor
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const chalk = require('chalk');

// Local
const WEBPACK_CONFIG = require('../config/webpack.config.dev');
const CONFIG = require('../config/config');

const PORT = parseInt(process.env.PORT, 10) || CONFIG.DEFAULT_PORT;
const HOST = process.env.HOST || CONFIG.DEFAULT_HOST;
const URL = `http://${HOST}:${PORT}/`;

const compiler = webpack(WEBPACK_CONFIG);
const server = new WebpackDevServer(compiler, {
  compress: true,
  hot: true,
  host: HOST,
  stats: 'minimal',
});

server.listen(PORT, HOST, (error) => {
  if (error) { return console.log(chalk.red(error)); }

  console.log(chalk.cyan(`Starting the development server at ${URL}...`));


  ['SIGINT', 'SIGTERM'].forEach((signal) => {
    process.on(signal, () => {
      server.close();
      process.exit();
    });
  });
});

我不确定dev服务器如何触发热重新加载。我的印象是，捆绑包包含一个脚本，该脚本连接到dev服务器上的Websocket连接，该连接将触发脚本下载并显示新资产。但情况可能并非如此，而且我还没有找到任何与热重新加载通信方式有关的信息。我只找到了客户端收到更新后热重新加载工作的一般概述。

我认为问题不在于Webpack的问题。我注意到，当我让Django为我的React文件提供服务时，这些速度问题就出现了。当您使用Django时，您的文件由Django服务器提供服务，这与webpack dev服务器相比本质上是相当慢的。webpack dev服务器与Django之间的整个通信过程可能需要花费时间，这需要Django服务器触发更改，然后再次重新提供静态文件

解决这个问题的一个方法是将React前端代码与后端代码隔离，并让React使用Django的restapi。它运行非常平稳，减少了服务器上的大量负载。

经过大量搜索，我终于找到了问题的解决方案。我找到了，所以我去掉了整个构建脚本，并将其替换为

package.json

中的一个脚本，该脚本只使用webpack dev server，没有任何标志：

"scripts": {
  "start": "cross-env NODE_ENV=development webpack-dev-server",
  // Scripts...
}

这会自动将热模块替换代码注入到我的包中，并在发生更改时刷新我的页面。这比我以前的livereload服务器快得多。bundle是通过我的应用程序模板中的url

http:localhost:8080/bundle.js引用的，而不是通过本地路径引用的。由于捆绑包保存在内存中，因此本地路径无论如何都不起作用
url还解释了如何使--inline--hot
功能也能正常工作，但我一直无法让它在我的设置中正常工作
如果您需要使用本地路径，而不是通过url引用捆绑包，那么您将不得不依赖使用webpack的监视模式并手动刷新页面，或者依赖Django插件。我发现的解决方案对我很有效，因为它反映了我们的生产环境。我们的Django部署通过我们管理的CDN引用前端资产。如果您必须使用Django代码部署前端资产，那么它可能不适合您，但是，如果您创建一个Django设置，在两个不同的应用程序模板之间切换，这是可能的：一个用于使用URL拉入脚本的开发，另一个用于引用来自STATICFILES\u DIRS
的文件的生产，我已经在这么做了。前端和后端项目位于两个完全独立的存储库中，前端资产通过webpack dev server的URL（）提供服务，而不是通过应用程序模板中的本地文件路径（path/to/bundle.js）。我想弄清楚的是，如果应用程序的HTML模板没有通过webpack dev server提供，我是否可以通过该URL利用webpack dev server的热重新加载功能。
"scripts": {
  "start": "cross-env NODE_ENV=development webpack-dev-server",
  // Scripts...
}