Open bnthor opened 5 years ago
@bnthor if html-loader
fails you can try html-srcsets-loader
Just npm i -D html-srcsets-loader
and then replace html-loader
in config/webpack.loaders.js
with option attrs
like this:
const html = {
test: /\.(html)$/,
use: [
{
loader: 'html-srcsets-loader',
options: {
attrs: ['img:src', ':srcset'],
},
},
],
};
This is a tricky issue. It seems like the recommended solution is what @Autapomorph has mentioned. However, I'm not too thrilled about replacing the default html-loader
with html-srcsets-loader
which doesn't appear to be well maintained.
Good news however, it seems like this is a known issue/request in the html-loader
project. I'm watching it and once it's resolved I'll be sure to update the package in SSB.
@ericalli there is another temporary workaround due to html-loader
issue:
copy-webpack-plugin
+ imagemin-webpack-plugin
+ imagemin-mozjpeg
:
npm i -D copy-webpack-plugin imagemin-webpack-plugin imagemin-mozjpeg
config/webpack.plugins.js
:
const CopyPlugin = require('copy-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const imageminMozjpeg = require('imagemin-mozjpeg');
...
// Images
const imagesCopy = new CopyPlugin([
{
from: path.join(config.root, config.paths.src, 'images'),
to: 'images',
},
]);
const imagesMin = new ImageminPlugin({
test: /\.(jpe?g|png|gif|svg)$/i,
gifsicle: {
interlaced: false,
},
optipng: {
optimizationLevel: 7,
},
pngquant: {
quality: '65-90',
speed: 4,
},
plugins: [
imageminMozjpeg({
progressive: true,
}),
],
});
...
module.exports = [
...
config.env === 'production' && imagesCopy,
config.env === 'production' && imagesMin,
...
].filter(Boolean);
this will copy every image in src/images
and optimize them in the same way as you already have with image-webpack-loader
in config/webpack.loaders.js
imagemin-webpack-plugin
is needed because copy-webpack-plugin
overwrites images optimized by image-webpack-loader
imagemin-mozjpeg
is need because imagemin-webpack-plugin
doesn't have mozjpeg
by defaultbut this solution seems to be slower than your existing with image-webpack-loader
but I think it can be used while there's a bug in html-loader
Looks like html-loader
is abandoned.
Hi! First of all, thank you for this project, it's really helpful. I just noticed something that could be annoying for some (it has been for me):
When building, images copying into
/dist
does not take into account thesrcset
attribute in html files, for example:<img src="src/images/logo.png" srcset="src/images/logo@2x.png 2x" />
You can still copy these files by hand but it's not ideal when deploying automatically.
Thanks again!