Question

我正在尝试将url-loader和image-webpack-loader与Webpack结合使用。我有一个非常简单的演示应用程序，其中包含一个我正在使用的图像。

在npm run build上，图片似乎使用url-loader编码，style.css更新（我认为）：

.hello {
  color: red;
  background: url(data:image/jpeg;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJmNmEyYmI0ODk2MjNlMjM1YTg0NDUzMGUzN2FkNjM4NC5qcGciOw==);
}

在浏览器中检查这个，我有

<img src="data:image/jpeg;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJmNmEyYmI0ODk2MjNlMjM1YTg0NDUzMGUzN2FkNjM4NC5qcGciOw==">

dom中的

，并且源似乎是匹配的，但图像实际上并未显示，并且控制台中没有错误。

我假设我的webpack.config.js在语法上是错误的，但不确定如何诊断它。这是我的webpack.config.js

const path                 = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "style.css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          },
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65
              },
              // optipng.enabled: false will disable optipng
              optipng: {
                enabled: true,
              },
              pngquant: {
                quality: '65-90',
                speed: 4
              },
              gifsicle: {
                interlaced: false,
              },
              // the webp option will enable WEBP
              webp: {
                quality: 75
              }
            }
          }
        ]
      }
    ]
  }
};

Webpack错误使用image-webpack-loader和url-loader结合彼此

0 个答案: