Django, ReactJS, Webpack горячая перезагрузка - PullRequest
Новая
       15

Django, ReactJS, Webpack горячая перезагрузка

0 голосов
/ 25 апреля 2018

Я пытался настроить компонент реагирования внутри django с помощью webpack 4.

Чтобы начать, я прочитал:

Использование Webpack прозрачнос Django + горячая перезагрузка компонентов React в качестве бонуса

Учебное пособие: Django REST с React (Django 2.0 и несколько тестов)

Оба эти прохождениядействительно хорошо.Наконец-то я установил, что он работает почти по второй ссылке, хотя я использую django 1.11.

Проблема, возникшая после перехода по второй ссылке, заключалась в том, что горячая перезагрузка не работает при использовании webpack-dev-server.Проблема в том, что django не может прочитать выходной файл webpack-dev-server (выдает ошибку 404), в то время как main.js может быть прочитан.Я читал, что файлы dev-server по умолчанию хранятся только в памяти.

Для решения проблемы с ошибкой 404 на файлах горячей перезагрузки установлен пакет write-file-webpack-plugin для записи файла при каждой перезагрузке.Затем изменил файл webpack-config.js на (я удалил несколько строк, чтобы сделать его короче ....): 

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

в моем package.json У меня есть следующая строка среди тега script: 

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

И в django я установил webpack-loader со следующими строками в settings.py:

STATIC_URL = '/static/'

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

Наконец, в моем корневом компоненте index.js мне не нужен module.hot.accept();линия

Видите ли вы недостатки этого подхода?Кроме того, что я должен был установить другой пакет?Почему я не заставил его работать с new webpack.HotModuleReplacementPlugin()

Если у кого-то возникнут вопросы по поводу моего подхода, я с удовольствием расширю свой вопрос, если есть какие-то неясные шаги.

...