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

Django-webpack-loader

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

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

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

3. 为了使用这些定制工具，需要在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获取。

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

英文原文：https://pascalw.me/blog/2020/04/19/webpack-django.html 译者：穆胜亮