【개인 메모】Wagtail, webpack 설치
우분투 19.04
Wagtail
pip install wagtail
mkdir PROJECTNAME
cd PROJECTNAME
wagtail start MYSITE .
webpack
django-webpack-loader 설정
npm init -y
npm install --save-dev webpack webpack-cli webpack-bundle-tracker
webpack.config.js
만들기 및 편집touch webpack.config.js
webapck.config.js
var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
module.exports = {
mode: 'development',
context: __dirname,
entry: {
// pass
},
output: {
path: path.resolve('./assets/bundles/'),
filename: "[name]-[hash].js",
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
],
module: {
rules: [
// pass
]
}
}
webpack 입출력에 필요한 폴더 만들기
mkdir -p assets/js
mkdir assets/css
mkdir assets/bundles
Bulma
동작 확인을 포함하여 Bulma를 설치해 보겠습니다.
webpack에서 Bulma를 사용하고 싶습니다.
npm install --save-dev node-sass sass fibers
npm install --save-dev style-loader css-loader postcss-loader precss autoprefixer sass-loader
npm install --save-dev bulma
webpack.config.js
...
entry: {
main_css: './assets/css/main.scss',
},
...
module: {
rules: [
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader',
}, {
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('precss'),
require('autoprefixer')
];
}
}
}, {
loader: 'sass-loader'
}]
}
]
}
...
assets/css/main.scss
@charset "utf-8";
@import "~bulma/bulma";
django-webpack-loader
다시, django-webpack-loader 설정
pip install django-webpack-loader
MYSITE/settings/base.py
...
INSTALLED_APPS = (
...
'webpack_loader',
)
...
STATICFILES_DIRS = (
...
os.path.join(BASE_DIR, 'assets'),
)
...
# 下記4行は必要ありません
try:
DEBUG
except NameError:
DEBUG = True
WEBPACK_LOADER = {
'DEFAULT': {
'CACHE': not DEBUG,
'BUNDLE_DIR_NAME': 'bundles/',
'STATS_FILE': os.path.join(BASE_DIR, './webpack-stats.json'),
'POLL_INTERVAL': 0.1,
'TIMEOUT': None,
'IGNORE': [r'.+\.hot-update.js', r'.+\.map'],
}
}
watch 모드에서 번들
./node_modules/.bin/webpack --config webpack.config.js --watch
home/templates/home/home_page.html
{% extends "base.html" %}
{% load static %}
{% load wagtailcore_tags wagtailimages_tags %}
{% load render_bundle from webpack_loader %}
{% block body_class %}homepage{% endblock %}
{% block extra_css %}
{% render_bundle 'main_css' %}
{% endblock extra_css %}
{% block content %}
<section class="section">
<div class="container">
<h1 class="title">
個人的メモ
</h1>
<p class="subtitle">
<strong>備忘のために</strong>書きました
</p>
</div>
</section>
{% endblock content %}
{% block extra_js %}
{% endblock %}
Reference
이 문제에 관하여(【개인 메모】Wagtail, webpack 설치), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/zoonaka/items/88159a599eac15071f95텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)