1. ホーム
  2. 質問と答え
  3. django webpack loader：アプリケーションのホットリロードに失敗する

django webpack loader：アプリケーションのホットリロードに失敗する

2017-07-26 12 views
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 %}

出典

2017-07-26 matthieu.cham

答えて

関連する問題

 関連する問題