-1

我正在为我的项目使用https://github.com/wbkd/webpack-starter

我确实有在我的 html 文件中引用的图像，svg例如png<img src="/public/image.png"/>

我不想使用 src 路径加载图像，而是将图像作为 base64 内容注入到我的 html 文件中，以提高页面性能并减少服务器请求的数量。

所以我想知道你会怎么做？

更新：

这是我所做的，但这不起作用

npm install url-loader --save-dev

并将此配置添加到生产配置：

  module: {
    rules: [
        {
            test: /\.(png|jpg|gif|svg)$/i,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: false,
                },
              },
            ],
          },
         ]
       }

我试图玩弄limit价值观，但无济于事。有任何想法吗 ？

更新：

那是我当前的rules配置，但没有任何效果，我也安装了html-loader但没有效果：

rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.s?css/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: false,
            },
          },
        ],
      },
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },
    ],
4

2 回答 2

0

以下是您应该遵循的几个步骤来解决您的问题：

  • 添加html-loader到您的webpack.config.prod.js：

webpack.config.prod.js

{
  test: /\.html$/i,
  loader: 'html-loader',
},
  • 修复你src的<img />使用相对路径而不是绝对路径，这不起作用：
<img src="../public/image.png"/> // this is incorrect `/public/image.png`
  • 最后，添加一个publicPathtooutput以webpack.common.js使其正常工作html-webpack-plugin：

webpack.common.js

{
  output: {
    // ...
    publicPath: '/',
  },
}
于 2020-12-23T02:39:52.450 回答
0

确保将url-loaderlitmit 设置为true. 根据他们的文档，将其设置true为默认选项，并且对转换为 base64 的文件大小没有限制。

将其设置为false不会将图像转换为 base64。

module: {
  rules: [
    {
      test: /\.(png|jpg|gif|svg)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: true,
          },
        },
      ],
    },
  ]
}

此外，为了让 webpack 处理图像，您需要导入它们。

import MyImage from '../public/image.png'

于 2021-05-04T00:31:43.733 回答