Django, ReactJS, Webpack 핫 새로고침

Django, ReactJS, Webpack 핫 새로고침

웹팩4의 도움을 받아 장고 안에 리액트 컴포넌트를 설정하려고 합니다.

시작하기 위해 다음 글을 읽었습니다.

• Django + 핫 새로고침으로 웹 팩을 투명하게 사용할 수 있습니다.

• 튜토리얼:리액트 기능이 있는 장고 REST (장고 2.0 및 약간의 테스트)

이 두 가지 모두 훌륭합니다.드디어 장고 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스크립트 태그에는 다음 행이 있습니다.

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

그리고 장고에 설치했습니다.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()?

프런트엔드를 리액트로, 백엔드를 django로 개발하면 다음과 같은 접근법이 있습니다.포트 8000에서 django 서버를 실행하고 포트 3000에서 react 서버를 실행하고 있습니다.

덧붙이면"proxy": "http://localhost:8000"포장되어 있습니다.리액트 코드 localhost:3000의 json은 hot-reload를 실행하고 api 호출은 localhost:8000으로 이동합니다.

언급URL : https://stackoverflow.com/questions/50028659/django-reactjs-webpack-hot-reload