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がはいります。