Closed
Description
The configuration load JS and CSS well but image not get filename base on data generated by BundleTracker.
Here is the webpack.config.js
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require("webpack");
const BundleTracker = require("webpack-bundle-tracker");
module.exports = {
context: __dirname,
entry: "./assets/scripts/index.js",
output: {
publicPath: "/dist/",
path: path.resolve(__dirname, "dist"),
filename: "js/[name].[contenthash].js",
assetModuleFilename: "images/[name].[contenthash][ext]",
},
module: {
rules: [
{
test: /\.(scss)$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"resolve-url-loader",
{
loader: "sass-loader",
options: {
sourceMap: true,
},
}
],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].[contenthash].css",
}),
new BundleTracker({ filename: "./manifest.json" }),
],
};
In index.js
...
import logo from "./../images/logo.png";
...
The template
{% load render_bundle from webpack_loader %}
{% load webpack_static from webpack_loader %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Jouy Luk</title>
{% render_bundle 'main' 'css' %}
</head>
<body class="home">
<!-- APP ROOT -->
<div class="app-root">
<!-- HEADER -->
<header class="header">
<div class="container-xxl">
<div class="header__wrapper">
<img src="{% webpack_static 'images/logo.png' %}"/>
</div>
</div>
</header>
<!-- /HEADER -->
<!-- MAIN -->
<main class="main">
</main>
<!-- /MAIN -->
<!-- FOOTER -->
<footer class="footer">
</footer>
<!-- /HEADER -->
</div>
<!-- /APP ROOT -->
{% render_bundle 'main' 'js' %}
</body>
</html>
The result
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jouy Luk</title>
<link href="/dist/css/main.b733b82b4c760a2525ad.css" rel="stylesheet">
</head>
<body class="home">
<!-- APP ROOT -->
<div class="app-root">
<!-- HEADER -->
<header class="header">
<div class="container-xxl">
<div class="header__wrapper">
<img src="/dist/images/logo.png">
</div>
</div>
</header>
<!-- /HEADER -->
<!-- MAIN -->
<main class="main">
</main>
<!-- /MAIN -->
<!-- FOOTER -->
<footer class="footer">
</footer>
<!-- /HEADER -->
</div>
<!-- /APP ROOT -->
<script src="/dist/js/main.680479a8b956aff2e3a9.js"></script>
</body>
</html>
The manifest.json
{
"status": "done",
"assets": {
"css/main.b733b82b4c760a2525ad.css": {
"name": "css/main.b733b82b4c760a2525ad.css",
"path": "/app/dist/css/main.b733b82b4c760a2525ad.css",
"publicPath": "/dist/css/main.b733b82b4c760a2525ad.css"
},
"images/car-red.cc4b98127f1640f00980.png": {
"name": "images/car-red.cc4b98127f1640f00980.png",
"path": "/app/dist/images/car-red.cc4b98127f1640f00980.png",
"publicPath": "/dist/images/car-red.cc4b98127f1640f00980.png"
},
"images/car-white.64e4df72e263f27b4e10.jpeg": {
"name": "images/car-white.64e4df72e263f27b4e10.jpeg",
"path": "/app/dist/images/car-white.64e4df72e263f27b4e10.jpeg",
"publicPath": "/dist/images/car-white.64e4df72e263f27b4e10.jpeg"
},
"images/logo.ea714c6de5100fa65aa6.png": {
"name": "images/logo.ea714c6de5100fa65aa6.png",
"path": "/app/dist/images/logo.ea714c6de5100fa65aa6.png",
"publicPath": "/dist/images/logo.ea714c6de5100fa65aa6.png"
},
"js/main.680479a8b956aff2e3a9.js": {
"name": "js/main.680479a8b956aff2e3a9.js",
"path": "/app/dist/js/main.680479a8b956aff2e3a9.js",
"publicPath": "/dist/js/main.680479a8b956aff2e3a9.js"
}
},
"chunks": {
"main": [
"css/main.b733b82b4c760a2525ad.css",
"js/main.680479a8b956aff2e3a9.js"
]
},
"publicPath": "/dist/"
}
The image src should be /dist/images/logo.ea714c6de5100fa65aa6.png but /dist/images/logo.png.
Metadata
Metadata
Assignees
Labels
No labels