📖

webpack+vueとdjangoの連携メモ

に公開
Django
Vue.js
webpack
tech

webpack+vueとdjangoの連携を自分の備忘録としてまとめました。

前提

・djangoとvueはそれぞれ、web画面で表示されていること
vue部分は、私作成の「Webアプリ開発環境構築(vue3+typescript by webpack)」参照。
https://zenn.dev/hibimosaku/articles/63d5926a3fe90d
・参照URL
https://github.com/django-webpack/django-webpack-loader

手順

front側のインストール

npm install webpack-bundle-tracker@0.4.3

front側のコード入力

・入力箇所は追加部分
・「publicPath」について
元のoutputのpathとwebで開いたときのlocalを参考に入力

webpack.config.js
const { VueLoaderPlugin } = require('vue-loader');　　　　
const BundleTracker = require('webpack-bundle-tracker');　//追加

module.exports = {
  entry:'./src/index.js',
  mode: 'development',
  output: {
    publicPath: 'http://127.0.0.1:5500/event_project/frontend/dist/',  // 追加
    filename: 'main.js',
  },
  resolve:{　　　　　　　　　　　　　　　　　　
    extensions: [".vue", ".js"],
  },
  module:{
    rules:[
      {　　　　　　　　　　　　　　　　　　　　
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new BundleTracker({filename: './webpack-stats.json'})　// 追加　　　　　　　　　　　　　　　　　　
  ],
}

django側のインストール

pip install django-webpack-loader

django側のコード入力

・入力箇所は追加部分

settings.py（一部抜粋）
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'webpack_loader',   # 追加
    'app',
]
# 以下は一番下に追加
WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'dist/',
        'STATS_FILE': os.path.join(BASE_DIR, 'frontend', 'webpack-stats.json')
    }
}
index.html
{% load render_bundle from webpack_loader %} //追加

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>django</title>
  </head>
  <body>
    <h1>django</h1>
    <div id="app"></div>　　　　//追加
    {% render_bundle 'main' %}　//追加
  </body>
</html>

結果

django側をwebで開いたとき以下のようになっていれば成功

Discussion