wagtail webpack react を使ったアプリケーションの雛形を作る

├── assets // jsファイルの配置先
│   ├── js
│   └── webpack_bundles
├── home // django app
├-- db.sqlite3
├-- manage.py
├-- node_modules
├-- package-lock.json
├-- package.json
├-- requirements.txt
├-- webpack-stats.json
├-- webpack.config.js
└── mysite // django project app

var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
  context: __dirname,
  /* エントリーポイント */
  entry: './assets/js/main.js',
  output: {
      path: path.resolve('./assets/webpack_bundles/'),
      filename: "[name]-[hash].js"
  },

  plugins: [
    new BundleTracker({filename: './webpack-stats.json'})
  ]
}

mkdir -p assets/js
touch assets/js/main.js

./node_modules/.bin/webpack --config webpack.config.js
------------------------------------------
Hash: 315df4b2f5abf7716c38
Version: webpack 3.10.0
Time: 69ms
                       Asset     Size  Chunks             Chunk Names
main-315df4b2f5abf7716c38.js  2.47 kB       0  [emitted]  main
   [0] ./assets/js/index.js 0 bytes {0} [built]
------------------------------------------

npm install --save react react-dom

npm install --save-dev babel-loader babel-core babel-preset-react babel-preset-es2015

vi .babelrc
-----------------------------------
{
  "presets": ["react", "es2015"]
}
-----------------------------------

var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
  context: __dirname,
  /* エントリーポイント */
  entry: './assets/js/main.js',
  output: {
      path: path.resolve('./assets/webpack_bundles/'),
      filename: "[name]-[hash].js"
  },
  /* ソースマップをファイル内に出力させる場合は以下を追加 */
  devtool: 'inline-source-map',
  module: {
    /* loaderの設定 */
    loaders: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/, // 除外するファイル/ディレクトリ（正規表現可）
        loader: 'babel-loader' // 使用するloader
      }
    ]
  },
  plugins: [
    new BundleTracker({filename: './webpack-stats.json'})
  ]
}

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "./node_modules/.bin/webpack --watch --progress",
    "build": "./node_modules/.bin/webpack --config webpack.config.js"
  },

npm run watch
npm run build
# これは`package.json` 追加後、デフォルトで定義されているコマンドになります。
npm run test

python3 -m pip install django-webpack-loader
-------------------------------------------
Collecting django-webpack-loader
  Downloading django_webpack_loader-0.5.0-py2.py3-none-any.whl
Installing collected packages: django-webpack-loader
Successfully installed django-webpack-loader-0.5.0
-------------------------------------------

STATICFILES_DIRS = [
    os.path.join(PROJECT_DIR, 'static'),
]

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'assets'),
    os.path.join(PROJECT_DIR, 'static'),
]

WEBPACK_LOADER = {
    'DEFAULT': {
        'CACHE': not DEBUG,
        'BUNDLE_DIR_NAME': 'webpack_bundles/', # must end with slash
        # PROJECT_DIRからここは変えているかもしれません。   
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
        'POLL_INTERVAL': 0.1,
        'TIMEOUT': None,
        'IGNORE': ['.+\.hot-update.js', '.+\.map']
    }
}

INSTALLED_APPS = [
    ...
    'webpack_loader',
]   

{% load render_bundle from webpack_loader %}
{# 以下は、body タグの直前に #}
{% render_bundle 'main' %}

python3 manage.py runserver    

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>wagtail, helloworld</div>
    );
  }
}
export default App;

ERROR in ./assets/js/App.jsx
Module parse failed: Unexpected token (6:6)
You may need an appropriate loader to handle this file type.

  module: {
    /* loaderの設定 */
    loaders: [
      {
        test: /\.(js|jsx)$/, // jsxも対象にする
        exclude: /node_modules/, // 除外するファイル/ディレクトリ（正規表現可）
        loader: 'babel-loader' // 使用するloader
      }
    ]
  },

Target container is not a DOM element.

OSError: Error reading /Users/xxxxx/xxxx/webpack-stats.json. Are you sure webpack has generated the file and the path is correct?