LoginSignup
20

More than 3 years have passed since last update.

django-webpack-loader のセットアップ

Posted at

django-webpack-loader

  • django: 2.2
  • webpack: 4.30.0
  • django-webpack-loader: 0.6.0

djangoでwebpackを使いたいとき。django-webpack-loaderがおすすめ。

GitHub - owais/django-webpack-loader: Transparently use webpack with django

過去にもdjango-webpack-loaderについて触れた記事を書いた。
- Django + Webpack を使ってVueを動かす
- webpackをつかってdjangoでbootstrap4をはじめる

今回は最新の情報で、簡潔に。

セットアップ

プロジェクトフォルダを作成。例として「PROJECTNAME」。そしてフォルダ内に移動。npm initする

mkdir PROJECT_NAME
cd PROJECT_NAME
npm init -y

npmで必要なモジュールをインストール

npm install --save-dev webpack webpack-cli webpack-bundle-tracker

webpack-bundle-trackerはwebpackのバンドル情報をwebpack-stats.jsonというファイルに吐き出す。django-webpack-loaderはこのwebpack-stats.jsonを使っている。

GitHub - owais/webpack-bundle-tracker: Spits out some stats about webpack compilation process to a file

webpackの設定ファイル webpack.config.jsを作成

touch webpack.config.js

編集。

webpack.config.js
var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
  mode: 'development',

  context: __dirname,

  entry: {
      main: './assets/js/main.js' // エントリ名とエントリポイント
  },

  output: {
      path: path.resolve('./assets/webpack_bundles/'), // 出力
      filename: "[name]-[hash].js",
  },

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

上記のように、エントリは/assets/js/に、出力は/assets/webpack_bundles/に設定した。それぞれフォルダを作成しておく

mkdir -p assets/js
mkdir assets/webpack_bundles

django-webpack-loaderのインストール

もしdjangoをインストールしていなければ

pip install django

djangoのプロジェクトを作成。名前は例として「djangoproject」。

django-admin.py startproject djangoproject
pip install django-webpack-loader
djangoproject/djangoproject/settings.py
...

INSTALLED_APPS = (
 ...
 'webpack_loader',
)

...

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, '../assets'), 
)

...

WEBPACK_LOADER = {
    'DEFAULT': {
        'CACHE': not DEBUG,
        'BUNDLE_DIR_NAME': 'webpack_bundles/', # must end with slash
        'STATS_FILE': os.path.join(BASE_DIR, '../webpack-stats.json'),
        'POLL_INTERVAL': 0.1,
        'TIMEOUT': None,
        'IGNORE': [r'.+\.hot-update.js', r'.+\.map']
    }
}


使用例: Vue.js

vueを使ってみる。

npm install --save-dev vue

エントリポイントの作成

touch assets/js/main.js

編集。

assets/js/main.js
window.Vue = require('vue');

上記のように書く際はランタイムだけのビルドを読み込む必要がある。

Vue is not a constructor

webpack.config.jsに追記。

webpack.config.js
module.exports = { 
  ...
  resolve: {
    alias: {
      vue: 'vue/dist/vue.js'
    }
  },
  ...
}

コンパイル。

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

assets/bundlesにバンドルされたファイルができる

djangoでバンドルを呼び出してみる。vueというアプリを仮につくる

mkdir -p djangoproject/vue/templates/vue
touch djangoproject/vue/templates/vue/index.html
djangoproject/djangoproject/settings.py
INSTALLED_APPS = (
 ...
 'vue',
)
djangoproject/djangoproject/urls.py
...
from django.views.generic.base import TemplateView
...

urlpatterns = [
    ...
    path('', TemplateView.as_view(template_name='vue/index.html')),
    ...
]

Hello Vue!

djangoproject/vue/templates/vue/index.html
{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example</title>
  </head>

  <body>
    {% verbatim %}
    <div id="app">
      {{ message }}
    </div>
    {% endverbatim %}

    {% render_bundle 'main' %}
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!'
        }
      })
    </script>
  </body>
</html>

render_bundleはテンプレートに必要なscriptlinkを読み込む。{{ message }}がdjangoによってレンダリングされないよう、verbatimしている

python djangoproject/manage.py runserver

http://127.0.0.1:8000/をブラウザで開く

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20