django-webpack配置

西门奇希

2023-12-01

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

1. 初始化django

django-admin.py startproject VueDjango

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

cd WebpackDemo

python 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

django-webpack配置

相关阅读

相关文章

相关问答

相关文档