I was configuring imagemin-webp-webpack-plugin to convert all my .png and .jpg images in my src/assets/images
to dist/assets/images
. When I ran my build command, the conversion was successful. All images had been converted to webp and distributed to dist/assets/images
. I thought "this is simple" and that it was time to create <picture>
tags in my src/index.html
file to start referencing .webp images:
src/index.html:
<picture>
<source srcset="assets/images/img-hero-home-attorney.webp" type="image/webp">
...
...
</picture>
When I npm run build
again, this time I got:
ERROR in ./src/index.html (./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html)
Module not found: Error: Can't resolve './assets/images/img-hero-home-attorney.webp' in '/Users/**/**/**/**/**/**/src'
@ ./src/index.html (./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html) 6:33-87
And it made perfect sense to me. These images don't exist in src/assets/images/
hence why Webpack can't resolve these.
So now I have hit a roadblock: How can I reference .webp images in my src/index.html
when these images will only exist on dist/whateverpath
after jpg's and png's have been processed by imagemin-webp-webpack-plugin?
This is my configuration file in case it could be helpful:
webpack.config.js
module.exports = {
entry: {
app: [
'./src/index.js'
]
},
output: {
path: path.resolve(__dirname, 'dist/'),
filename: 'assets/js/[name].bundle.js',
},
devtool: 'source-map',
plugins: [
new CleanWebpackPlugin({
dry: false,
cleanOnceBeforeBuildPatterns: ['!index.html']
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: './index.html',
minify: false,
chunks: ['app']
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css',
chunkFilename: '[id].css'
}),
new HtmlCriticalWebpackPlugin({
base: 'dist/',
src: 'index.html',
dest: 'index.html',
inline: true,
minify: true,
extract: false,
width: 1351,
height: 1200,
penthouse: {
blockJSRequests: false,
}
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new ImageminWebpWebpackPlugin({
config: [{
test: /\.(jpe?g|png)/,
options: {
quality: 85
}
}],
overrideExtension: true,
detailedLogs: true,
silent: true,
strict: true
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.html$/,
loader: 'html-loader',
query: {
minimize: false
}
},
{
test: /\.(scss)$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
},
{
loader: 'css-loader',
options: {
sourceMap: true,
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: function () {
return [
require('autoprefixer')
];
}
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
},
{
test: /\.(png|svg|jpg|gif|webp)$/,
use: {
loader: 'file-loader',
options: {
name: 'assets/images/[name].[ext]',
}
}
},
]
},
};
I have the same issue. After two day struggling, i decide to handle at runtime...