He estado intentando configurar un componente React dentro de Django con la ayuda de Webpack 4.

Para comenzar, revisé y leí:

• Uso de Webpack de forma transparente con Django + componentes React de recarga en caliente como bonificación

• Tutorial: Django REST con React (Django 2.0 y algunas pruebas)

Ambos tutoriales son geniales. Por fin, lo conseguí casi funcionando siguiendo el segundo enlace a pesar de que uso Django 1.11.

El problema que tuve después de seguir el segundo enlace fue que la recarga en caliente no funciona cuando se usa un webpack-dev-server . El problema es que Django no puede leer el archivo de salida del webpack-dev-server (da un error 404) mientras que se puede leer main.js He leído que los archivos del dev-server desarrollo solo viven en la memoria de forma predeterminada.

Para solucionar el problema con el error 404 en los archivos de recarga activa, instalé el paquete write-file-webpack-plugin para escribir el archivo cada recarga. Luego cambié el webpack-config.js a (eliminé algunas líneas para acortarlo....):

 var path = require('path'); //webpack is not needed since I removed it from plugins //const webpack = require('webpack'); var BundleTracker = require('webpack-bundle-tracker'); var WriteFilePlugin =require('write-file-webpack-plugin'); module.exports = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } }, ] }, entry: [ './frontend/src/index', ], output: { path: path.join(__dirname, 'frontend/static/frontend'), // Changing the name from "[name]-[hash].js" to not get 1000 files in the static folder. filename: 'hotreloadfile.js' }, plugins: [ //This line writes the file on each hot reload new WriteFilePlugin(), //This can be removed. //new webpack.HotModuleReplacementPlugin(), new BundleTracker({filename: './webpack-stats.json'}) ], mode:'development', };

en mi package.json tengo la siguiente línea entre la etiqueta del script:

 "start": "webpack-dev-server --config ./webpack.config.js",

Y en Django instalé webpack-loader con las siguientes líneas en settings.py :

 STATIC_URL = '/static/' WEBPACK_LOADER = { 'DEFAULT': { 'BUNDLE_DIR_NAME': 'frontend/', 'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json') } }

Finalmente, en mi componente raíz llamado index.js , no necesito el module.hot.accept(); línea

¿Ve algún inconveniente en este enfoque? Excepto que tuve que instalar otro paquete?

¿Por qué no conseguí que funcionara con new webpack.HotModuleReplacementPlugin() ?