小编Dmi*_*try的帖子

如何在 Next.js (webpack 5) 中使用 ImageMinimizerWebpackPlugin 压缩图像?

我想使用这个插件压缩图像,但我面临着构建过程中的问题,但图像未压缩。

我是 webpack 的新手,不明白出了什么问题(也许我需要一个将压缩文件作为文件夹的退出点?)

next.config.js

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

const nextConfig = {
  future: {
    webpack5: true
  },

  webpack: (config, options) => {

    config.module.rules.push({
      test: /\.(jpe?g|png|svg)$/i,
      type: "asset",
    })

    config.plugins.push(new ImageMinimizerPlugin({
      minimizerOptions: {
        // Lossless optimization with custom option
        // Feel free to experiment with options for better result for you
        plugins: [
          ["jpegtran", { progressive: true }],
          ["optipng", { optimizationLevel: 5 }],
          // Svgo configuration here https://github.com/svg/svgo#configuration
          [
            "svgo",
              {
                plugins: 
                  {
                    name: "removeViewBox",
                    active: false,
                  },
              },
            ], …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs webpack next.js

5
推荐指数
1
解决办法
1785
查看次数

标签 统计

javascript ×1

next.js ×1

reactjs ×1

webpack ×1