如何在Django + React + Webpack应用中实现热重载

Question

我正在使用Django和React Js开发应用程序，我想在其上进行热重载，搜索后，我意识到与Django和Webpack的最佳集成是django-webpack-loader，因此将其添加到我的项目中。这是我的项目的设置。

这是 server.js 文件：

var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");
var config = require("./webpack.config");


new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    inline: true,
    progress: true,
    historyApiFallback: true,
    headers: {"Access-Control-Allow-Origin": "*"}
}).listen(3000, "0.0.0.0", function(err, result) {
    if (err) {
        console.log(err);
    }

    console.log("Listening at 0.0.0.0:3000");
});

webpack.config.js ：

var webpack = require("webpack");
var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
const BundleTracker = require("webpack-bundle-tracker");


var config = {
    resolve: {
        alias: {
            common: path.resolve("./common/components"),
            utils: path.resolve("./common/utils_js")
        },
        modules: [path.resolve("./node_modules")]
    },
    entry: {
        bundle: [
            require.resolve("webpack-dev-server/client") + "?http://localhost:3000",
            require.resolve("webpack/hot/dev-server"),
            "react",
            "react-dom",
            "react-bootstrap",
            "react-router-dom",
            "react-infinite-scroller",
            "react-select",
            "react-autocomplete",
            "jquery",
            "jquery-ui",
             .......[more more]

        ],
        "bundle.css": "./common/assets/less/bundle.less",
         .......[more more]

    },
    output: {
        path: path.resolve("./static/"),
        filename: "[name]",
        publicPath: "http://localhost:3000/static/"
    },
    plugins: [
        new BundleTracker({filename: "./static/webpack-stats.json"}),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: "bundle",
            filename: "bundle.js"
        }),
        new ExtractTextPlugin("[name]")
    ],
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ["css-loader"]
                })
            },
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ["css-loader", "less-loader"]
                })
            },
            {
                test: /\.(ttf|eot|svg|woff2?)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "file-loader?name=[name].[ext]"
            },
            {
                test: /\.(wav|mp3|jpg|png|gif|ico)$/,
                loader: "file-loader?name=[name].[ext]"
            },
            {
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /node_modules/,
                query: {
                    presets: ["env"],
                    plugins: ["transform-object-rest-spread"]
                }
            },
            {
                test: /\.jsx$/,
                loader: "babel-loader",
                exclude: /node_modules/,
                query: {
                    presets: ["env", "react"],
                    plugins: ["transform-object-rest-spread"]
                }
            }
        ]
    }
};

module.exports = config;

package.json ：

{
  "name": "test",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "create-react-class": "^15.6.3",
    "css-loader": "^1.0.0",
    "diff-match-patch": "^1.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^2.0.0",
    "font-awesome": "^4.7.0",
    "fullcalendar": "^3.8.0",
    "fullcalendar-scheduler": "^1.9.4",
    "jquery": "^3.2.1",
    "jquery-textcomplete": "^1.8.4",
    "jquery-ui": "^1.12.1",
    "jquery-ui-bootstrap": "^1.0.0",
    "less": "^3.0.4",
    "less-loader": "^4.0.5",
    "moment": "^2.20.1",
    "moment-timezone": "^0.5.14",
    "pdfjs-dist": "^2.0.489",
    "prop-types": "^15.6.0",
    "react": "^16.4.1",
    "react-autocomplete": "^1.7.2",
    "react-bootstrap": "^0.32.0",
    "react-dom": "^16.4.1",
    "react-draggable": "^3.0.4",
    "react-dropzone": "^5.0.1",
    "react-google-recaptcha": "^1.0.0",
    "react-infinite-scroller": "^1.1.2",
    "react-number-format": "^3.5.1",
    "react-router-dom": "^4.2.2",
    "react-scrollbar": "^0.5.1",
    "react-select": "^1.2.0",
    "react-slider": "^0.11.2",
    "react-sortable-hoc": "^0.8.3",
    "react-textarea-autosize": "^7.0.4",
    "showdown": "^1.8.6",
    "style-loader": "^0.22.1",
    "url-loader": "^1.0.1",
    "webpack": "^3.10.0",
    "webpack-bundle-tracker": "^0.3.0",
    "webpack-dev-server": "2.11.3"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.1",
    "eslint": "^5.4.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-react": "^7.6.1",
    "prettier-eslint": "^8.8.1"
  },
  "scripts": {
    "dev": "webpack -d --watch --progress",
    "build:dev": "webpack -d --progress",
    "build:prod": "webpack -p --progress"
  }
}

当我运行命令node server.js时，没有错误，然后进入应用程序时，显示了以下错误，该错误在图像error console 中显示