django webpack loader：React app热重载失败

时间：2017-07-26 10:41:56

标签： django reactjs webpack-dev-server webpack-hmr react-hot-loader

某些上下文：我正在开发一个Django应用程序，我想在模板中集成一个React组件。我是React的新手，而不是Django。

所以，我正在尝试设置一个React dev环境，在我的Django模板中热重新加载React组件。我按照这些教程：

看起来很好，因为当我修改并保存我的js源代码时，我有以下反馈：

在npm控制台中：

> node server.js

Listening at 0.0.0.0:3000
Hash: ecfef9f1eea0022319ef
Version: webpack 3.3.0
Time: 6294ms
                       Asset     Size  Chunks                    Chunk Names
main-ecfef9f1eea0022319ef.js  1.37 MB       0  [emitted]  [big]  main
  [26] ./node_modules/react/react.js 56 bytes {0} [built]
  [77] (webpack)/hot/log.js 1.04 kB {0} [built]
 [141] (webpack)/hot/emitter.js 77 bytes {0} [built]
 [142] ./node_modules/react-dom/index.js 59 bytes {0} [built]
 [169] ./assets/js/App.js 779 bytes {0} [built]
 [170] multi react-hot-loader/patch webpack-dev-server/client?http://localhost:3000 webpack/hot/only-dev-server ./assets/js/index.js 64 bytes {0} [built]
 [171] ./node_modules/react-hot-loader/patch.js 41 bytes {0} [built]
 [172] ./node_modules/react-hot-loader/lib/patch.js 209 bytes {0} [built]
 [293] (webpack)-dev-server/client?http://localhost:3000 5.83 kB {0} [built]
 [302] ./node_modules/loglevel/lib/loglevel.js 6.74 kB {0} [built]
 [335] (webpack)-dev-server/client/overlay.js 3.6 kB {0} [built]
 [340] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
 [342] (webpack)/hot/only-dev-server.js 2.37 kB {0} [built]
 [344] ./assets/js/index.js 1.02 kB {0} [built]
 [430] ./node_modules/react-hot-loader/index.js 41 bytes {0} [built]
    + 430 hidden modules
webpack: Compiled successfully.
webpack: Compiling...
Hash: 8fd43db8b836382b9172
Version: webpack 3.3.0
Time: 206ms
                               Asset       Size  Chunks                    Chunk Names
        main-8fd43db8b836382b9172.js    1.37 MB       0  [emitted]  [big]  main
0.ecfef9f1eea0022319ef.hot-update.js  892 bytes       0  [emitted]         main
ecfef9f1eea0022319ef.hot-update.json   43 bytes          [emitted]
  [26] ./node_modules/react/react.js 56 bytes {0}
  [77] (webpack)/hot/log.js 1.04 kB {0}
 [141] (webpack)/hot/emitter.js 77 bytes {0}
 [142] ./node_modules/react-dom/index.js 59 bytes {0}
 [169] ./assets/js/App.js 780 bytes {0} [built]
 [170] multi react-hot-loader/patch webpack-dev-server/client?http://localhost:3000 webpack/hot/only-dev-server ./assets/js/index.js 64 bytes {0}
 [171] ./node_modules/react-hot-loader/patch.js 41 bytes {0}
 [172] ./node_modules/react-hot-loader/lib/patch.js 209 bytes {0}
 [293] (webpack)-dev-server/client?http://localhost:3000 5.83 kB {0}
 [302] ./node_modules/loglevel/lib/loglevel.js 6.74 kB {0}
 [335] (webpack)-dev-server/client/overlay.js 3.6 kB {0}
 [340] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
 [342] (webpack)/hot/only-dev-server.js 2.37 kB {0}
 [344] ./assets/js/index.js 1.02 kB {0}
 [430] ./node_modules/react-hot-loader/index.js 41 bytes {0}
    + 430 hidden modules
webpack: Compiled successfully.

在react-dev-tools控制台中，我得到：

[HMR] Waiting for update signal from WDS...  main-ecfef9f1eea0022319ef.js:8192:4
[WDS] Hot Module Replacement enabled.  main-ecfef9f1eea0022319ef.js:22302:3
[WDS] App updated. Recompiling... main-ecfef9f1eea0022319ef.js:22305:3
[WDS] App hot update...  main-ecfef9f1eea0022319ef.js:22431:3
[HMR] Checking for updates on the server...  main-ecfef9f1eea0022319ef.js:8192:4
[HMR] Updated modules:  main-ecfef9f1eea0022319ef.js:8192:4
[HMR]  - 169  main-ecfef9f1eea0022319ef.js:8192:4
[HMR] Consider using the NamedModulesPlugin for module names.  main-ecfef9f1eea0022319ef.js:8192:4
[HMR] App is up to date.

看起来相当不错，但我的django页面上的React组件保持绝对相同，除非我当然按下了F5。我想我可能遗漏了一些明显的东西，我会很感激任何有用的指针。

这是我的设置：

package.json （仅限deps）：

"devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.0.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-hot-loader": "^3.0.0-beta.7",
    "webpack": "^3.3.0",
    "webpack-bundle-tracker": "^0.2.0",
    "webpack-dev-server": "^2.6.1"
  }

.babelrc： 

{
    "presets": ["env", "es2015", "react"],
    "plugins": ["react-hot-loader/babel"]
}

webpack.config.js： 

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

const config = {
  context: __dirname,

  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './assets/js/index.js', // entry point of our app. assets/js/index.js should require other js modules and dependencies it needs
  ],

  output: {
      path: path.resolve('./assets/bundles/'),
      filename: "[name]-[hash].js",
      publicPath: 'http://localhost:3000/assets/bundles/' // Tell django to use this URL to load packages and not use STATIC_URL + bundle_name
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(), // don't reload if there is an error
    new BundleTracker({filename: './webpack-stats.json'}),
  ],

  module: {
    rules: [
      // we pass the output from babel loader to react-hot loader
      { test: /\.jsx?$/, exclude: /node_modules/, use: ['babel-loader'], },
    ],
  },

  resolve: {
    modules: ['node_modules', 'bower_components'],
    extensions: ['.js', '.jsx']
  },

  devServer: {
    hot: true,
    contentBase: './assets/js',
  }
}

module.exports = config;

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,
    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')
})

资产/ JS / index.js： 

import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import App from './App'


const render = Component => {
    ReactDOM.render( 
        <AppContainer>
        <Component />
        </AppContainer>,
        document.getElementById('react-app')
    )
}
render(App)
if (module.hot) {
    module.hot.accept('./App', () => { render(App) })
}

资产/ JS / App.js： 

import React from 'react';

const App = () => {
return (
    <div>
    <h1>Hello StackOverflow</h1>
    </div>
    );
}
export default App;

django settings.py： 

WEBPACK_LOADER = {
    'DEFAULT': {
        'CACHE': not DEBUG,
        'BUNDLE_DIR_NAME': 'bundles/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
        'POLL_INTERVAL': 0.1,
        'TIMEOUT': None,
        'IGNORE': ['.+\.hot-update.js', '.+\.map']
    }
}

django模板： 

{% load render_bundle from webpack_loader %}

{% block content-right %}
    <div id="react-app"></div>
    {% render_bundle 'main' %}
{% endblock content-right %}

1 个答案:

答案 0 :(得分：0)

在index.js

中

而不是：

if (module.hot) {
    module.hot.accept('./App', () => { render(App) })
}

使用：

if(module.hot) {
    module.hot.accept();
}

github中存在问题：https://github.com/webpack/webpack-dev-server/issues/100

或将Babel ES2015预设更改为["es2015", { "modules": false }]

Can't get Webpack 2 HMR React to work

相关问题
最新问题