在这些图片是由imagemin-webpack插件生成之后，我如何加载webp图像？
在这些图片是由imagemin-webpack插件生成之后，我如何加载webp图像？
提问于 2020-09-18 19:54:15
我将imagemin-webp-webpack-plugin配置为将.png和.jpg图像在src/assets/images中转换为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-webp-webpack-plugin处理jpg和png之后，当这些图像只存在于dist/whateverpath时，如何在src/index.html中引用这些图像？
这是我的配置文件，以防有帮助：
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]',
}
}
},
]
},
};回答 3
Stack Overflow用户
发布于 2020-09-23 06:23:59
您可以使用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/',
},
],
},
}),
],
]Stack Overflow用户
发布于 2021-03-04 20:11:02
我有同样的问题，这是相当令人沮丧的，它从来没有得到解决，所以这是我的解决办法。
正如您所说，如果webp映像仅由ImageminWebpWebpackPlugin在构建过程中生成，则不能在元素中引用它们。和您一样，我的html-加载程序由于文件不存在而抛出错误。在我的例子中，我只是添加了一个预构建步骤，首先将图像转换为webp，而不是在构建过程中使用ImageminWebpWebpackPlugin，而是只使用imagemin插件。
下面是他们的github页面站点上的默认配置
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上运行了它，但是它没有工作，因此Windows选项卡上的另一个用户通过将路径转换为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);
})();Stack Overflow用户
发布于 2021-04-30 05:34:21
我也有同样的问题。经过两天的挣扎，我决定在运行时处理.
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, img, 'sizes');
__setAttribute(source, img, 'srcset');
__setAttribute(source, img, 'media');
if (!source.hasAttribute('srcset')) {
__setAttribute(source, img, 'src', 'srcset');
}
img.parentElement.insertBefore(picture, img);
picture.appendChild(source);
picture.appendChild(img);
}
return dom.documentElement.outerHTML;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63962037
复制相关文章
相似问题
腾讯云开发者
