django - ホットローダーに反応してフロントエンドを更新しない

Question

フロント エンドがホット モードで実行されていない理由がわかりません。フロントエンドとバックエンドを可能な限り分離しようとしています。2 つを接続する唯一のことは、django のwebpack_loaderアプリを使用してwebpackビルドをロードし、テンプレート ( index.html) にロードすることです。

私のバックエンドは Django にあり、現在 で実行されていhttp://127.0.0.1:8000/ます。

私のフロントエンドはでホストされていますlocalhost:8080

ホットモードの devServer がオンになっています0.0.0.0:8080

フロントエンドを少し変更して保存して、何が起こるかを確認しようとしましたが、フロントエンドは何も更新されていません。私の開発者ツールでは、次のように表示されます。

[HMR] Update check failed: SyntaxError: Unexpected token <
    at Object.parse (native)
    at XMLHttpRequest.request.onreadystatechange (http://localhost:8000/static/js/main.js:44:33)

これが私のnpmスクリプトです：

"scripts": {
    "watch-client": "node ./node_modules/webpack/bin/webpack.js --verbose --colors --display-error-details --config webpack.watch.js && node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config webpack.watch.js",
    "watch": "npm run watch-client"
  },

webpack.config.js:

var path = require('path')
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: [
        './app/index.js'
    ],
    output: {
        path: path.resolve(__dirname, 'public'),
        publicPath: '/js/',
        filename: 'main.js'
    },
    devtool: 'eval',
    debug: true,
    module: {
        loaders: [
            { test: /\.json$/, loader: 'json-loader' },
            { test: /\.jsx$/, loader: 'jsx-loader' },
            { test: /\.es6$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
            { test: /\.less$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
            { test: /\.css$/, exclude: /node_modules/, loader: 'style-loader!css-loader' }
        ]
    },
    plugins: [
        new ExtractTextPlugin('style.css', {
            allChunks: true
        }),
        new webpack.optimize.CommonsChunkPlugin('common.js'),
    ]
};

webpack.watch.js:

var Webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var config = require("./webpack.config.js");
var BundleTracker = require('webpack-bundle-tracker');

var port = process.env.WEBPACK_PORT || 8080;
var host = process.env.HOST || 'localhost';

// add hot loader
config.entry.unshift(
    "webpack-dev-server/client?http://" + host + ":" + port,
    "webpack/hot/only-dev-server"   // only prevents reload on syntax errors
);

config.plugins = [
    new ExtractTextPlugin("style.css", {
        allChunks: true
    }),
    new Webpack.HotModuleReplacementPlugin(),
    new BundleTracker({filename: './webpack-stats.json'})
];

config.module.loaders = [
    { test: /\.json$/, loader: 'json-loader' },
    { test: /\.jsx$/, loader: 'jsx-loader' },
    { test: /\.es6$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
    { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
    { test: /\.less$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
    { test: /\.css$/, exclude: /node_modules/, loader: 'style-loader!css-loader' }
];

// dev server for react hot loader
config.devServer = {
    publicPath:  "/js/",
    filename: 'main.js',
    contentBase: "./public",
    hot:         true,
    inline:      true,
    lazy:        false,
    quiet:       true,
    noInfo:      true,
    headers:     {"Access-Control-Allow-Origin": "*"},
    stats:       {colors: true},
    host:        "0.0.0.0",
    port:        port
};

module.exports = config;