我的问题是如何使Django 'static'模板标签生成不同的URL(指向webpack dev server)用于js bundles。当然我可以在模板中硬编码它,但这不是一个好的解决方案。
以下是我的项目配置
webpack.config.js
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const BundleTracker = require('webpack-bundle-tracker')
module.exports = {
mode: 'development',
context: path.dirname(path.resolve(__dirname)),
entry: {
index: './typescript_src/index.ts',
},
output: {
path: path.resolve('./myproject/assets/myapp/bundles/'),
filename: "[name]-[hash].js"
},
resolve: {
extensions: ['.ts', '.js' ]
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
plugins: [
new CleanWebpackPlugin(),
new BundleTracker({filename: './myproject/webpack-stats.json'})
],
devServer: {
port: 3000,
publicPath: '/myapp/bundles/',
// hot: true,
headers: {
"Access-Control-Allow-Origin": "http://127.0.0.1:8000", /**Django dev server */
}
}
}
设置.py
WEBPACK_LOADER = {
'DEFAULT': {
'CACHE': not DEBUG,
'BUNDLE_DIR_NAME': 'myapp/bundles/', # must end with slash
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
'POLL_INTERVAL': 0.1,
'TIMEOUT': None,
'IGNORE': [r'.+\.hot-update.js', r'.+\.map']
}
}
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'assets'),
)
最初,我决定在开发期间让webpack也能为其他静态文件提供服务
webpack.config.js
devServer: {
port: 3000,
publicPath: '/myapp/bundles/',
contentBase: path.resolve('./myproject/assets')
// hot: true,
headers: {
"Access-Control-Allow-Origin": "http://127.0.0.1:8000", /**Django dev server */
}
设置.py
# in development mode serve from wepack dev server
if DEBUG:
STATIC_URL = 'http://localhost:3000/'
else:
STATIC_URL = '/static/'
但后来我意识到我必须提供其他应用(如admin、tinymce等)的静态文件,而这对于webpack Dev服务器是不可能实现的。
问题在于由django-webpack-loader的'render_bundle'标签生成的url (/static/myapp/bundles/bundle-name.js) 会导致Http 404,因为webpack-dev-server将生成的bundle保存在内存中而非磁盘上。
此外,如果我设置
STATIC_URL = localhost:3000
并配置webpack-dev-server以服务于我的应用程序的其他静态文件,不会提供其他应用程序的静态文件
STATICFILES_STORAGE ='django.contrib.staticfiles.storage.ManifestStaticFilesStorage'
(请参见ManifestStaticFilesStorage)。这将为您节省添加/维护额外Django包的麻烦。 - Ejezbase.html
模板继承,也可以进一步扩展来创建最终的 Django 页面模板。详情请参见此处和此处,我认为这比使用 django-webpack-loader 要好得多。@myke - Ejez