DJANGO + REACT + WEBPACK開發服務器

Question

我在沒有文檔的情況下繼承的項目存在很大問題。 該項目是使用Django和React構建的。

這是項目結構（沒有不重要的內容）：

myapp/
├── assets
│   ├── bundles
│   │   ├── bar.js
│   │   ├── bar.js.map
│   │   ├── login.js
│   │   ├── login.js.map
│   │   ├── main.js
│   │   ├── main.js.map
│   │   ├── messages
│   │   │   └── assets
│   │   │       └── js
│   │   │           ├── appbar.json
│   │   │           [...]
│   ├── css
│   │   ├── bootstrap.min.css
│   │   ├── [...]
│   ├── js
│   │   ├── appbar.js     <<<--- REACT COMPONENT!!!
│   │   ├── [...] <<<--- OTHER REACTS COMPONENTS!!
├── conf
│   ├── default_settings.py
│   ├── default_settings.pyc
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── settings.py
│   ├── settings.pyc
│   ├── urls.py
│   ├── urls.pyc
│   └── wsgi.py
├── core
│   ├── admin.py
│   ├── admin.pyc
│   ├── apps.py
│   ├── color_palette.py
│   ├── color_palette.pyc
│   ├── constants.py
│   ├── constants.pyc
│   ├── decorators.py
│   ├── decorators.pyc
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── models.py
│   ├── models.pyc
│   ├── tests.py
│   ├── urls.py
│   ├── urls.pyc
│   ├── utils.py
│   ├── utils.pyc
│   ├── views.py
│   └── views.pyc
├── manage.py
├── node_modules
│    ├ webpack-dev-server   <<<--- IS INSTALLED HERE WITH AL LOT OF OTHER STUFFS
│    [...]
├── package.json
├── templates
│   ├── index.html
│   └── login.html
├── webpack.config.js
└── webpack-stats.json

我目前正在使用apache2通過以下VirtualHost配置運行站點：

WSGIScriptAlias /myapp /usr/local/myapp/conf/wsgi.py process-group=myapp-wsgi-daemon
WSGIDaemonProcess myapp-wsgi-daemon processes=2 threads=15 display-name=myapp-wsgi python-path=/usr/local/myapp:/usr/local/dash2-env/lib/python3.5/site-packages
WSGIProcessGroup  myapp-wsgi-daemon

我可以使用以下網址訪問該應用程序： https：// localhost / myapp /

很好，但是當我修改React Componen時（請參見上面的樹中的appbar.js），我必須啟動此命令才能看到結果：

./node_modules/.bin/webpack --config webpack.config.js

編譯目錄中的所有.js文件以構建資產/捆綁包。

webpack.config.js如下：

//require our dependencies
var path = require('path')
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
var ReactIntlPlugin=require('react-intl-webpack-plugin')

module.exports = {
  //the base directory (absolute path) for resolving the entry option
  context: __dirname,

  //your current directory. You don't have to specify the extension now,
  //because you will specify extension later in the `resolve` section
  entry: {
    main: './assets/js/index.js',
    login: './assets/js/login.js'
  },

  output: {
    //where you want your compiled bundle to be stored
    path: path.resolve('./assets/bundles/'),
    //naming convention webpack should use in your files
    filename: '[name].js',
  },

  plugins: [
    //tells webpack where to store data about your bundles.
    new BundleTracker({filename: './webpack-stats.json'}),
    new ReactIntlPlugin()
  ],

  devtool: "source-map",

  module: {
    loaders: [
      //a regexp that tells webpack use the following loaders on all
      //.js and .jsx files
      {
        test: /\.jsx?$/,

        //we definetely don't want babel to transpile all the files in
        //node_modules. That would take a long time.
        exclude: /node_modules/,
        //use the babel loader
        loader: 'babel-loader',
        query: {
          //specify that we will be dealing with React code
          presets: ['react']
        }
      },
      //loaders for css stylesheets
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader' ]
      },
      //loader for font files (used by fontawesome, etc)
      {
          test: /\.(eot|svg|ttf|woff|woff2)$/,
          loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
      },
      //babel loader for internationalization
      {
          test: /\.js?$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {
              "cacheDirectory": true,
              "metadataSubscribers":[ReactIntlPlugin.metadataContextFunctionName],
              "plugins": ["transform-runtime",
                  ["react-intl", {
                      "enforceDescriptions": false,
                      //directory where intermediate files are stored for internationalization
                      "messagesDir": "./assets/bundles/messages/",
                  }]],
              "presets": ['react', "es2015", "stage-1"]
          }
      },
    ]
  },

  resolve: {
    //tells webpack where to look for modules
    modules: ['node_modules'],
    //extensions that should be used to resolve modules
    extensions: ['.js', '.jsxs']
  }
}

在google上搜索，並在此站點中，熱重新加載Reacts組件的唯一解決方案是安裝webpack-dev-server。

我遵循了很多教程，但是得到的最好的東西是目錄列表。

這是Im用於啟動dev-server的命令：

./node_modules/.bin/webpack-dev-server -d --hot --htt --config webpack.config.js

我仍然不確定我必須在啟動命令中設置什么基於內容的參數:(

請幫我。 我沒有想法！

謝謝！！

Answer 1

請閱讀此。 我希望它對您有用：

結合使用Webpack和Django +熱重載React組件作為獎勵

您應該安裝一些python庫：

pip install django-webpack-loader

我認為上面提到的教程很好。