在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);
})();

Link to issues page here

,

我也有同样的问题。经过两天的挣扎，我决定在运行时处理...

    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;
    }