Question

我一直在尝试在webpack 4的帮助下在django中设置一个react组件。

为了让我开始，我经历了阅读：

Using Webpack transparently with Django + hot reloading React components as a bonus

Tutorial: Django REST with React (Django 2.0 and a sprinkle of testing)

这些演练都非常好。最后，即使我使用django 1.11，我仍然按照第二个链接进行操作。

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

要解决安装了程序包write-file-webpack-plugin的热重装文件上的错误404问题，以便在每次重新加载时写出文件。然后将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中，我在脚本标记中有以下行：

"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()

如果有人对我的方法有疑问，如果有一些不明确的步骤，我很乐意提出问题。

Django，ReactJS，Webpack hot reload

0 个答案: