I have a problem with the srcset tag, since the processing does not work, while the src works fine, I am using Webpack and PUG (ex Jade).
Currently the code of the webpack.config.js
const path = require('path');const HtmlWebPackPlugin = require("html-webpack-plugin");const MiniCssExtractPlugin = require("mini-css-extract-plugin");var htmlTemplates = [''];var multipleFiles = htmlTemplates.map(name => { return new HtmlWebPackPlugin({ filename: "./" + name +".html", template: "./src/pug/" + name +".pug" });});module.exports = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } }, { test: /\.pug$/, use: [ { loader: 'html-loader' }, { loader: 'pug-html-loader', options: { pretty: true } } ] }, { test: /\.scss$/, use: [ MiniCssExtractPlugin.loader, // "style-loader", // style nodes from js strings"css-loader","sass-loader" ] }, { test: /\.(eot|woff|woff2|ttf|svg)$/, use: [ { loader: 'file-loader', options: { name:'[name].[ext]', outputPath: 'assets/fonts', publicPath: './assets/fonts' } } ] }, { test: /\.(png|svg|jpg|gif|jpeg)$/, use: [ { loader: 'file-loader', options: { name:'[path][name].[ext]', context: 'src' } } ] } ] }, plugins: [ new HtmlWebPackPlugin({ template: "./src/pug/index.pug", filename: "./index.html" }), new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional filename: "./css/[name].css", chunkFilename: "[id].css" }) ].concat(multipleFiles)};
Example:
img(src="../assets/images/logo.png" srcset="../assets/images/logo@2x.png" alt="")
Process as follows:
<img src="assets/images/logo.png" srcset="../assets/images/logo@2x.png" alt="">
Everything works correctly, but it does not process the paths of the "srcset" element, I need to do some additional configuration. Any possible solution?