django-webpack配置

来源：互联网发布：淘宝没销量换宝贝编辑：程序博客网时间：2024/05/16 16:55

https://github.com/owais/django-webpack-loader

1. 初始化django

django-admin.py startproject VueDjango

使用django-admin工具初始化项目

cd WebpackDemopython manage.py startapp FreeMap

每一个project下会自带项目管理工具manage.py，使用它的startapp功能初始化一个应用

此时，一个基本的django脚手架工程就已经完成了

2. 安装django-webpack相关lib

a. node.js ：https://nodejs.org/en/

b. add package.js to project root folder

{  "name": "Demo",  "version": "0.0.0",  "description": "",  "devDependencies": {    "babel": "^5.4.7",    "babel-core": "^5.4.7",    "babel-loader": "^5.1.3",    "node-libs-browser": "^0.5.0",    "react": "^0.13.3",    "webpack": "^1.9.8",    "webpack-bundle-tracker": "0.0.5",    "webpack-dev-server": "^1.9.0",    "vue": "^1.0.26",    "vue-strap": "^1.1.26",    "bootstrap": "^3.3.7",    "leaflet": "^1.0.1"  }}

c. 在project root folder下执行 npm install （国内淘宝源切换方法：http://www.cnblogs.com/trying/p/4064518.html）

d. pip install django-webpack-loader

至此关于环境的配置就完成了

3. app配置（setting.py）

a. INSTALLED_APPS

INSTALLED_APPS = [    'django.contrib.admin',    'django.contrib.auth',    'django.contrib.contenttypes',    'django.contrib.sessions',    'django.contrib.messages',    'django.contrib.staticfiles',    'webpack_loader',    'FreeMap']

b. STATIC

STATIC_URL = '/static/'STATIC_ROOT = os.path.join(BASE_DIR, 'static')

static_root的路径会在下面的配置中继续使用

c. WEBPACK_LOADER

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': ['.+\.hot-update.js', '.+\.map']    }}

BUNDLE_DIR_NAME是模板命令提取js/css的目录，stats_file是web-pack生成的一个mapping文件，这些文件会在webpack的配置中出现，需要保持一致

4. webpack配置

a. 在project root folder下创建webpack.config.js （也可以是其他名字）

var path = require("path");var webpack = require('webpack');var BundleTracker = require('webpack-bundle-tracker');module.exports = {  context: __dirname,  entry: {      main:'./FreeMap/app/main/main.js'  },  output: {      path: path.resolve('./static/bundles/'),      filename: "[name]-[hash].js"  },  plugins: [    new BundleTracker({filename: './webpack-stats.json'})  ]}

其中output和BundleTracker的路径需要与setting.py中的路径保持一致

5. template usage

a. 在使用template之前需要进行配置

TEMPLATES = [    {        'BACKEND': 'django.template.backends.django.DjangoTemplates',        'DIRS': [BASE_DIR+'/FreeMap/app'],        'APP_DIRS': True,        'OPTIONS': {            'context_processors': [                'django.template.context_processors.debug',                'django.template.context_processors.request',                'django.contrib.auth.context_processors.auth',                'django.contrib.messages.context_processors.messages',            ],        },    },]

在DIRS中填写template搜索根目录

b. 使用命令导入js

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">{% load render_bundle from webpack_loader %}{% load staticfiles %}<html><head>    <meta charset="UTF-8">    <title>{% block title %}{% endblock %}</title>    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.min.css' %}">    <link rel="stylesheet" type="text/css" href="{% static 'leaflet/leaflet.css' %}">    {% render_bundle 'main' 'css' %}    {% block extrahead %}{% endblock %}</head><body><form action="" method="post">    {% csrf_token %}</form>{% block content %}{% endblock %}{% render_bundle 'main' 'js' %}</body></html>

这里static是django自带的静态文件命令，render_bundle则是按app name导入打包文件的命令

6. 运行

在项目根目录下

node_modules\.bin\webpack --config webpack.config.js

此时会在指定的路径下生成打包文件（上文中的 ./static/bundles），同时生成mapping文件 ./webpack-stats.json

如果需要热部署，可以输入如下命令

node_modules\.bin\webpack --config webpack.config.js --watch

此时启动django，将会自动按mapping文件来寻找相应的打包文件

python manage.py runserver 0.0.0.0:8080

0 0