龙空技术网

在Django中使用Webpack:再也不需要插件了

Python部落 966

前言:

今天咱们对“pythondjango使用”可能比较关怀,同学们都想要剖析一些“pythondjango使用”的相关内容。那么小编在网摘上收集了一些关于“pythondjango使用””的相关知识,希望看官们能喜欢,大家一起来了解一下吧!

这篇文章将会学习如何在Django中以最小的代价安装Webpack。这个问题常规的解决办法是使用django-webpack-loader,但是在我看来这种方式代价太大。这篇文章的目的是提供一个在Django中安装设置Webpack的手册,只使用Webpack和Django的功能而不使用任何插件。

Django-webpack-loader

django-webpack-loader 看起来是在Django项目中安装Webpack的事实上的解决办法。我尝试使用它但是这个方法的效果并不好:

它需要一个非标准的manifest插件(这看起来也很奇怪)。

它提供了一组定制Django模板的工具,而不是使用Django优秀的内置static功能。

为了使用这些定制工具,需要在Django中做一堆配置。

它是一个很不方便的解决方案,既需要Webpack插件也需要Django插件。

免责声明:尽管我在这里批评了Django-webpack-loader,这并不意味着我否认它的作者在这项工作中付出的艰苦的努力。

普通 Django和Webpack

在Django中使用Webpack实际上相当简单,并不需要任何Webpack或者Django插件。

Django原生支持处理静态资源。在开发过程中,Django可以提供静态资源,并且在生产部署过程中,Django可以压缩文件和对文件名进行哈希。Webpack也可以做这些(甚至更多),但最方便的是让Webpack只负责生成资源,让Django只负责处理资源。

在实践中,像这样做:

1. 使用Django默认的对静态资源的支持

从Django文档中可以看到,重要的设置如下:

STATICFILES_DIRS

STATIC_URL

STATICFILES_STORAGE- 使用ManifestStaticFilesStorage让Django通过对文件名哈希来实现缓存.

2. 配置Webpack写入文件到STATICFILES_DIRS变量的目录

你可以使用任何你想使用的Webpack配置项。不过只有一部分重要的配置项:

1. 通过STATICFILES_DIRS变量配置Webpack写入文件的目录

2. 配置output.publicPath变量与Django的STATIC_URL匹配

3. 不让Webpack哈希文件名(除了文件块,参考下文)

4. 确保webpack-dev-server写入文件到磁盘(这样Django可以在部署时提供服务)

现在,在开发过程中你需要同时运行webpack-dev-server和Django服务器。你可以使用程序文件和一个类似Goreman的工具来方便地完成这件事而不需要打开两个终端。Webpack写文件到STATICFILES_DIRS变量指向的目录,Django使用这些文件提供服务。最棒的是:你仍然能够获得Webback的优势,像热加载和动态导入。

你可以使用Django的static标签来包含Webpack生成的资源:

对于生成部署,你首先需要用Webpack构建资源,然后像通常那样使用manage.py collectstatic命令。太方便快捷了!只有简单的Django和Webpack,优雅又简单。

Webpack 文件块(动态导入)

像我们前面提到的那样,使用Webpack哈希块文件名。Webpack运行过程中默认使用块编号来指向块文件。当Django运行collectstatic时,它对文件名进行哈希,然后找到没有哈希的引用进行替换。

例如,如果你在一个样式表中引用指向了foo.jpg文件,然后Django将foo.jpg重名为foo.695e1b313f34.jpg,它将会自动把样式表中引用的文件名从foo.jpg修改为foo.695e1b313f34.jpg。

在运行时,Webpack默认通过块文件的编号chunk id引用它们,因此collectstatic命令不会正确地识别块文件名。通过使用Webpack哈希块文件名,我们得到了被恰当哈希的块文件名,因此这些文件可以被浏览器恰当的缓存。

示例项目

对上面内容,我已经在Github上创建了一个演示项目,因此你可以看看实际效果如何。这个项目也可从Heroku获取。

如果上面的内容对你是有用的,我很想听到你的反馈!

英文原文:

译者:穆胜亮

标签: #pythondjango使用