0

いくつかのコンテキスト:私はDjangoアプリケーションを開発していますが、Reactコンポーネントをテンプレートに統合したいと思います。私はREJECTには新しく、Djangoには新しくない。django webpack loader:アプリケーションのホットリロードに失敗する

私はReactコンポーネントのホットリロードをDjangoテンプレート内に設定して、React開発環境をセットアップしようとしています。

そして、それは非常に細かいようだ

  • http://owaislone.org/blog/webpack-plus-reactjs-and-django/
  • https://www.botzeta.com/post/11/は私が持っているので、以下、(それだけのWebPACKの最新バージョンにアップデート最初の一つだように見える):私は、これらのチュートリアルに従っNPMコンソールで

    ::私は私のJSのソースコードを変更して保存フィードバック

    > 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. 
    

    と反応し-DEV-ツールコンソールの私が取得:

    [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. 
    

    私はもちろんのF5をヒットしない限り、desperatly同じままなかなか良さそうです、まだ私は私のDjangoのページにコンポーネントを反応します。私はおそらく何かを明らかにしていないと思う、私は任意の有用なポインタをいただければ幸いです。ここで

    は私の設定です:

    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 %} 
    

答えて

関連する問題