3

我正在为一个 Django 应用程序设置 webpack，这django-webpack-loader似乎是显而易见的选择。我可以很好地编译我的js和scss文件，但是在加载图像时我碰壁了。

我的webpack.config.js文件看起来像这样（为简洁起见，我删除了 scss、minifiers、babel 等）：

const path = require('path');
const webpack = require('webpack');
const BundleTracker = require('webpack-bundle-tracker');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');


module.exports = {
  context: __dirname,
  entry: {
     main: ['@babel/polyfill', './ledger/static/ledger/js/index.js']
  },

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

  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
               {
                 loader: "file-loader",
                 options: {
                   outputPath: 'images'
                 }
               }
             ]
      }
    ]
  }
  mode: 'development'
}

据我所知，file-loader我需要在静态图像文件中加载。

当我运行构建时，图像文件很高兴地位于我的compiled_assets/images目录中，并添加了它的哈希值。

问题似乎在于如何引用该文件。虽然js使用

{% render_bundle 'main' 'js' 'DEFAULT' %}

标签，我无法显示图像文件。文档建议我需要使用类似的东西

{% load webpack_static from webpack_loader %}`
...
<img src="{% webpack_static 'images/logo.jpg' %}"/>

在我的 html 文件中但没有运气，它只是尝试将实际资产呈现为

<img src="/static/logo.jpg">

我认为问题可能在我的settings.py文件中。这是它的相关部分：


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


WEBPACK_LOADER = {
    'DEFAULT': {
        'CACHE': not DEBUG,
        'BUNDLE_DIR_NAME': 'ledger/compiled_assets/', # must end with slash
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
        'POLL_INTERVAL': 0.1,
        'TIMEOUT': None,
        'IGNORE': ['.+\.hot-update.js', '.+\.map']
    }
}

我错过了什么吗？类似于 , 的东西STATICFILES_DIRS，STATIC_FILES或者可能是一些与图像相关的设置？

4

1 回答 1

1

有同样的问题。看起来{% load webpack_static from webpack_loader %}忽略ebpack-stats.json了所有图像都在“资产”键中的位置：

"assets":{"images/logo-9af925ecf75862678220bae8cad387ad.png":{"name":"images/logo-9af925ecf75862678220bae8cad387ad.png","publicPath":"static/images/logo-9af925ecf75862678220bae8cad387ad.png"}...}

我将尝试通过合并用于 css/js 文件的 Django Webpack Loader 和用于图像的 collectstatic 来管理它

于 2020-12-14T23:26:11.653 回答