配置Django和Webpack Dev Server

时间:2019-06-17 12:57:18

标签: django webpack webpack-dev-server

我正在使用Webpack Dev Server设置Django,并且很难使所有内容协同工作。

我设法使Djano应用程序能够服务webpack开发服务器生成的静态js,但是没有实时重新加载,而且我也遇到了奇怪的sockjs 404错误...

在我的settings.py中,我有这个:

STATIC_ROOT = os.path.join(PUBLIC_DIR, 'static')
STATIC_URL = 'http://127.0.0.1:8080/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'dist'), # We do this so that django's collectstatic copies or our bundles to the STATIC_ROOT or syncs them to whatever storage we use.
)

WEBPACK_LOADER = {
    'DEFAULT': {
        'CACHE': not DEBUG,
        'BUNDLE_DIR_NAME': '', # must end with slash
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
        'POLL_INTERVAL': 0.1,
        'TIMEOUT': None,
        'IGNORE': ['.+\.hot-update.js', '.+\.map']
    }
}

和我的webpack配置如下:

var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
  context: __dirname,
  entry: './djangowebpack/static/js/index.js',
  plugins: [
    new BundleTracker({filename: './webpack-stats.json'})
  ]
}

我还没有指定输出路径,所以它只是在根目录下生成一个dist文件夹。

我正在使用webpack-loader将其传递给模板,如下所示:

{% load render_bundle from webpack_loader %}


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <h1 id="lol"></h1>
    {% render_bundle 'main' 'js' 'DEFAULT' %}
</body>
</html>

很高兴知道这里是否有任何明显的错误...非常感谢。

0 个答案:

没有答案