這篇文章將會學習如何在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文檔中可以看到，重要的設置如下：
<code>STATICFILES_DIRS/<code>
<code>STATIC_URL/<code>
<code>STATICFILES_STORAGE/<code>- 使用<code>ManifestStaticFilesStorage/<code>讓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譯者：穆勝亮
關鍵字: STATICFILES jpg 文件
