webpackをつかってdjangoでbootstrap4をはじめる #Django

bootstrap4がベータになっているのでそろそろ触り始めようと思いました。webpackを使ってみようと思います

django上で動かしてみたいと思います。この投稿の内容とけっこうかぶっています

npmパッケージのインストール

Djangoのプロジェクトディレクトリに移動する。必要なnpmパッケージをインストールする

npm init -f
npm install --save-dev webpack webpack-bundle-tracker jquery popper.js style-loader css-loader bootstrap@4.0.0-beta

webpack.config.jsを作成・編集

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 = {
  context: __dirname,

  entry: './assets/js/main.js', // これがエントリーポイント

  output: { // コンパイルされたファイルの設定
      path: path.resolve('./assets/bundles/'),
      filename: "[name]-[hash].js",
  },

  plugins: [
    new BundleTracker({filename: './webpack-stats.json'}),
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default'],
    })
  ],

  module: {
 　loaders: [
  　{
   　test: /\.css$/,
   　use: [ 'style-loader', 'css-loader' ]
  　},
 ],
},
}

エントリーポイントのmain.jsを作成・編集

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

内容は下記

assets/js/main.js

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

コンパイル

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

これでwebpack.config.jsのoutputで指定したとおり、assets/bundles/に「main-(ハッシュ値).js」というファイルができます。

Djangoの設定

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

pip install django-webpack-loader

settings.pyを設定します

settings.py


...

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

...

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'bundles/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
    }
}

...

INSTALLED_APPS = (
 ...
 'webpack_loader',
)

テンプレートの書き方

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 </head>
 <body>
　<div class="alert alert-success" role="alert">
  　<h4 class="alert-heading">Well done!</h4>
  　<p>Bootstrap4をmezzanine上で動かしています</p>
  　<hr>
  　<p class="mb-0">webpackを使っています</p>
　</div>

　{% render_bundle 'main' %}

 </body>

{% render_bundle 'main'%}のところにコンパイルされたjsがはいります。