Question

我正在关注this tutorial设置Django来使用webpack生成的包来提供模板。我已经像在教程中一样设置了它。但问题是当我转到localhost:8000时，当我在chrome devtools中打开控制台时，我得到Uncaught SyntaxError: Unexpected token <异常。除了reactjs包之外，我放入模板文件中的其他html会被渲染。我的文件夹结构如下：

.
├── djangoapp
│   ├── db.sqlite3
│   ├── djangoapp
│   │   ├── __init__.py
│   │   ├── settings.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   ├── manage.py
│   ├── reactapp
│   │   └── static
│   │       ├── bundles
│   │       │   └── main-fdf4c969af981093661f.js
│   │       └── js
│   │           └── index.jsx
│   ├── requirements.txt
│   ├── templates
│   │   └── index.html
│   └── webpack-stats.json
├── package.json
├── package-lock.json
└── webpack.config.js

settings.py

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

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, "templates"), ],
        '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',
            ],
        },
    },
]

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'bundles/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
    }
}

STATIC_URL = 'static/'

webpack.config.js

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

module.exports = {
  context: __dirname,

  entry: './djangoapp/reactapp/static/js/index.jsx', 

  output: {
      path: path.resolve('./djangoapp/reactapp/static/bundles/'),
      filename: "[name]-[hash].js",
  },

  plugins: [
    new BundleTracker({filename: './djangoapp/webpack-stats.json'}),
  ],

  module: {
    rules: [
      { test: /\.js$/, use: ['babel-loader'], exclude: /node_modules/},
      { test: /\.jsx$/, use: ['babel-loader'], exclude: /node_modules/}
    ]
  },

  resolve: {
    modules: ['node_modules', 'bower_components'],
    extensions: ['.js', '.jsx']
  },


};

模板/ index.html中

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Example</title>
 </head>
 <body>
 <div id="react"></div>
 {% render_bundle 'main' %}
 </body>
</html>

.babelrc

{
  "presets": ["babel-preset-env", "react"]
}

在main-fdf4c969af981093661f.js文件的第1行的开头，<!DOCTYPE html>元素的开始标记处抛出异常。我的猜测是浏览器需要javascript代码，而是给出了html。此外，我不明白Django如何知道在哪里查找捆绑包，因为我没有在任何地方指定reactapp的根（static/bundles目录）。

Answer 1

这是一个棘手的问题！一切似乎都完美无缺。首先，请确保按预期安装django-webpack-loader。其次，你的担心似乎是有效的，我们必须告诉django在哪里寻找捆绑包，因为默认它使用STATIC_URL + bundle_name（如http://owaislone.org/blog/webpack-plus-reactjs-and-django/中的文档所示）。尝试将publicPath添加到webpack.config.js：

output: {
  path: path.resolve('./djangoapp/reactapp/static/bundles/'),
  filename: "[name]-[hash].js",
  publicPath: "http://localhost:8080/<path to bundles>"
},

我不确定它是否有用，但请告诉我它是否有帮助！

Answer 2

我在一段时间后通过将以下代码添加到settings.py来解决了问题。

STATICFILES_DIRS = [
   ('bundles', os.path.join(BASE_DIR, 'reactapp/bundles'))
]

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

我还必须将STATIC_URL更改为/static/。

它应该如何运作：

Webpack会为reactapp/bundles文件夹生成包。
当Django服务器运行时，它会扫描reactapp/bundles内的更改每次新更改后，将文件夹的内容复制到djangoapp/static/设置定义的根STATIC_ROOT文件夹。
之后，浏览器可以通过STATIC_ROOT访问STATIC_URL中的文件，如下所示：localhost:8000/static/bundles/<bundle>。它通常默认为localhost:8000/static/<bundle>，但STATICFILES_DIRS内元组的第一个元素明确告诉Django复制static/bundles目录中的内容。
然后Django会在提供页面时自动生成指向静态文件的链接。

注意： STATIC_URL应添加/，否则静态路径将附加到当前页面链接而不是根目录。例如，在/index页面上，指向静态文件的链接将是localhost:8000/index/static/...而不是localhost:8000/static，这将是错误的，并会导致404 not found。

错误：＆＃39;未捕获的SyntaxError：意外的令牌＆lt;＆＃39; （Django + React + Webpack）

2 个答案: