使用webpack encore压缩图片

Question

我一直在尝试为一个新项目配置Encore。CSS和JS都能正常工作，但我想在图片方面再进一步。到目前为止，我只是在构建过程中创建了我的图像的副本，保持相同的结构：

//file: webpack.config.js
let Encore = require('@symfony/webpack-encore');

Encore
// the project directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // the public path used by the web server to access the previous directory
    .setPublicPath('/build')
    .enableSourceMaps(!Encore.isProduction())
    // uncomment to create hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // uncomment to define the assets of the project
    .addEntry('js/app', './assets/js/app.js')
    .addEntry('js/admin', './assets/js/admin.js')
    .addStyleEntry('css/app', './assets/css/app.scss')
    .addStyleEntry('css/bootstrap-datepicker', './node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.css')

    //assures compatibility in case of same file name
    .configureFilenames({
        images: '[path][name].[hash:8].[ext]',
    })

    // uncomment if you use Sass/SCSS files
    .enableSassLoader(function (options) {
        // https://github.com/sass/node-sass#options
        options.includePaths = ['assets/compass_src'];
    })

    // uncomment for legacy applications that require $/jQuery as a global variable
    .autoProvidejQuery()

    // show OS notifications when builds finish/fail
    .enableBuildNotifications()
    .cleanupOutputBeforeBuild()
;

module.exports = Encore.getWebpackConfig();

我是这样管理我的图片的：

//file: app.js
const imagesContext = require.context('../images', true, /\.(png|jpg|jpeg|gif|ico|svg|webp)$/);
imagesContext.keys().forEach(imagesContext);

我尝试使用glob对我的图像进行无损压缩，但并没有成功。

如何对我的图像进行压缩？

- Relisora

Answer 1

您可以使用image-webpack-loader插件，并将其添加到您的webpack.config.js中：

.addLoader({
   test: /\.(gif|png|jpe?g|svg)$/i,
   loader: 'image-webpack-loader',
   options: {
      bypassOnDebug: true, //only minify during production
      plugins: [
          {removeTitle: true},
          {convertColors: {shorthex: false}},
          {convertPathData: false}
         ]
      },
  })

为了管理您的图片，您可以创建一个image.js文件并按以下方式加载您的图片：

require.context('../images', true, /\.jpe?g$|.png$|.svg$|.gif$/);

更多信息可以在这里找到。

- Helenesh

Answer 2

在Symfony v6 webpack encore中，我使用image-minimizer-webpack-plugin。

yarn add -D image-minimizer-webpack-plugin sharp

// webpack.config
const Encore = require('@symfony/webpack-encore');
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

Encore
        // directory where compiled assets will be stored
        .setOutputPath('public/build/')
        // COMPRESS IMAGES
        .addPlugin(new ImageMinimizerPlugin({
            minimizer: {
                implementation: ImageMinimizerPlugin.sharpMinify,
                options: {
                    encodeOptions: {
                        // Your options for `sharp`
                        // https://sharp.pixelplumbing.com/api-output
                        jpeg: {
                            quality: 72,
                            mozjpeg: true
                        }
                    }
                }
            }
        }))

        // IMAGES
        .copyFiles({
            from: './assets/images',
            // optional target path, relative to the output dir
            // to: 'images/[path][name].[ext]',

            // if versioning is enabled, add the file hash too
            to: 'images/[path][name].[hash:8].[ext]',

            // only copy files matching this pattern
            pattern: /\.(gif|png|jpe?g|svg|webp)$/
        })
        // ... 

参考链接：

1. image-minimizer-webpack-plugin
2. 管理 CSS 和 JavaScript
3. 添加自定义加载器和插件

这里我使用了 sharp。你可以使用任何一个（imagemin | @squoosh/lib | sharp | svgo），所有的配置都是相同的。

- Sudhakar Krishnan