django-webpack-loader + vue-cli での最小限の設定

はじめに

django-webpack-loader + vue-cli の構成で、起動から Heroku での公開までを試した際の備忘録です。

django-webpack-loader の django 側の設定は基本的には README.md#configuration に書いてある通りなんですが、webpack 側は webpack.config.js での設定しかありません。

この記事では vue-cli で動作させるために vue.config.js の設定を紹介します。

バージョン

terminal

$ python --version
Python 3.7.11
$ vue --version
@vue/cli 4.5.13

pyproject.toml

Django = "^3.2.4"
django-webpack-loader = "^1.1.0"

package.json

"vue": "^3.0.0"
"webpack-bundle-tracker": "^1.1.0"

最小限の設定

vue.config.js

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

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
            ? '/static/dist/'
            : 'http://localhost:8080/',
  outputDir: 'static/dist',
  configureWebpack: {
    plugins: [
      new BundleTracker({filename: './webpack-stats.json'}),
    ],
  },
  css: {
    sourceMap: true,
  },
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
}

項目別の説明

publicPath

publicPath: process.env.NODE_ENV === 'production' 
          ? '/static/dist/'
          : 'http://localhost:8080/'

本番以外は http://localhost:8080/ になります。
localhost:8080 は devServer のデフォルトです。

なぜ '/' じゃダメなのか

publicPath で HOST:PORT を省略すると、django の静的ファイルへの URL が 以下のようになります。
http://localhost:8000/<file>
localhost:8000 は runserver のデフォルトです。

つまり django 側からファイルを探そうとします。
開発中は build で静的ファイルを生成する訳ではないので、 vue の devServer にファイルを取りにいく必要があります。そのため設定値は http://localhost:8080/ となります。

outputDir

outputDir: 'static/dist'

django 側で settings.STATICFILES_DIRS に指定したディレクトリ下の値にします。

今回は settings.STATICFILES_DIRS=['static'] を指定しておいたので、
yarn build では static/ 下に dist として出力されるようにしました。

configureWebpack

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

django-webpack-loader は webpack-bundle-tracker と一緒に使うことになります。
ここはその設定です。

django 側の settings.WEBPACK_LOADER["default"]["STATS_FILE"] で参照するファイルをどこに出力するかを指定します。

css.sourceMap

css: {
  sourceMap: true,
}

django-webpack-loader が filename.css.map を探そうとするのですが、vue-cli ではデフォルトが無効になっているので、そのままだとエラーになってしまいます。

devServer.headers

devServer: {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
}

ホットリロードを有効にするために必要です。
vue 側のソースコードに変更があった場合 localhost:8000(django) から localhost:8080(vue) の hot-update.json にアクセスしようとするのですが、その際に CORS にひっかかります。それを回避するために devServer では 'Access-Control-Allow-Origin': '*' を指定しています。

さいごに

今回の試したソースコードを載せておきます。
あくまで django-webpack-loader + vue-cli のお試しなので、django/vue のプロジェクトは生成しただけになってます。

Github
https://github.com/tsukachu/django_vue