webpack - 在 imagemin-webp-webpack-plugin 生成这些图像后，如何加载这些图像？

Question

我正在配置 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 无法解决这些问题。

所以现在我遇到了障碍:如何在我的 src/index.html 中引用 .webp 图像当这些图像只存在于 dist/whateverpath 上时在 jpg 和 png 被 imagemin-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',
                        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]',
                    }
                }
            },
        ]
    },
    
};

Answer 1

您可以使用 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/',
          },
        ],
      },
    }),
  ],
]