如何解决在imagemin-webp-webpack-plugin生成webp图像后，如何加载它们？
我正在配置 imagemin-webp-webpack-plugin ，将src/assets/images中的所有.png和.jpg图像转换为dist/assets/images。当我运行构建命令时，转换成功。所有图像都已转换为webp并分发到dist/assets/images。我以为“这很简单”，是时候在我的<picture>文件中创建src/index.html标签来开始引用.webp图像了：
src / index.html：
<picture>
<source srcset="assets/images/img-hero-home-attorney.webp" type="image/webp">
...
...
</picture>
当我再次npm run build时，这次我得到了：
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
这对我来说非常有意义。这些图像在src/assets/images/中不存在，因此Webpack无法解析这些图像。
所以现在我遇到了一个障碍：如何在 imagemin-处理了jpg和png后，这些图像仅存在于src/index.html上的情况下，如何在dist/whateverpath中引用.webp图像？ webp-webpack-plugin ？
这是我的配置文件，以防万一：
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',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]',}
}
},]
},};
解决方法
您可以使用filemanager-webpack-plugin将转换后的图像复制回assets/images文件夹-https://github.com/gregnb/filemanager-webpack-plugin/
const FileManagerPlugin = require('filemanager-webpack-plugin');
plugins: [
new ImageminWebpWebpackPlugin({
config: [{
test: /\.(jpe?g|png)/,options: {
quality: 85
}
}],overrideExtension: true,detailedLogs: true,silent: true,strict: true
}),new FileManagerPlugin({
onEnd: {
copy: [
{
source: './dist/**/*.webp',destination: './src/assets/images/',},],}),]
我遇到了同样的问题，而且一直没有解决，这很令人沮丧，所以这是我的解决方案。
如您所说，如果它们仅在构建过程中由 ImageminWebpWebpackPlugin 制作，则不能在元素中引用您的 webp 图像。和你一样，我的 html-loader 抛出错误，因为文件不存在。就我而言，我只是添加了一个预构建步骤，首先将图像转换为 webp，并且在构建过程中不使用 ImageminWebpWebpackPlugin，而是单独使用 imagemin-webp 插件。
这是他们 github 页面上的默认配置 Site
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
(async () => {
await imagemin(['images/*.{jpg,png}'],{
destination: 'build/images',plugins: [
imageminWebp({quality: 50})
]
});
console.log('Images optimized');
})();
当然，我在 Windows 10 上运行了它，但它不起作用，所以问题选项卡上的另一个用户通过将路径转换为 unix 样式解决了这个问题。
const path = require('path');
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
(async () => {
const img = await imagemin([path.resolve(__dirname,'img/*.{jpg,png}').replace(/\\/g,'/')],{
destination: path.resolve(__dirname,'dist/webp').replace(/\\/g,'/'),plugins: [imageminWebp({ quality: 70 })],});
console.log('Images optimized');
console.log(img);
})();
我也有同样的问题。经过两天的挣扎，我决定在运行时处理...
import html from './content.html';
const parser = new DOMParser();
/**
* @param {string} html
*/
function replaceImgToPicture(html) {
var dom = parser.parseFromString(html,'text/html');
var images = dom.querySelectorAll('img');
function __setAttribute(source,img,attr,newAttr) {
var value = img.getAttribute(attr);
if (value) {
source.setAttribute(
newAttr || attr,value.replace(/\.(jpe?g|png|gif)/gi,'.webp')
);
}
}
for (var i = 0; i < images.length; i++) {
var img = images[i];
if (img.parentElement && img.parentElement.tagName === 'PICTURE') {
continue;
}
var picture = document.createElement('picture');
var source = document.createElement('source');
source.setAttribute('type','image/webp');
__setAttribute(source,'sizes');
__setAttribute(source,'srcset');
__setAttribute(source,'media');
if (!source.hasAttribute('srcset')) {
__setAttribute(source,'src','srcset');
}
img.parentElement.insertBefore(picture,img);
picture.appendChild(source);
picture.appendChild(img);
}
return dom.documentElement.outerHTML;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。