Image 如何使用webpack创建64幅图像的基础？

我正在为我的项目使用

我的html文件中引用了

svg

和

png

图像，如

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

所以我想知道你会怎么做

更新：

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

npm install url-loader --save-dev

并将此配置添加到：

我试图使用

限制
值，但没有帮助。
有什么想法吗

更新：

这是我当前的
规则
配置，但没有任何效果，我还安装了
html加载程序
但没有效果：

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',
      },
    ],

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


将
html加载程序
添加到
webpack.config.prod.js
：

webpack.config.prod.js

{
测试：/\.html$/i，
加载器：“html加载器”，
},


修复您的
的
src
//这是不正确的`/public/image.png`


最后，在
webpack.common.js
中的
output
中添加一个
publicPath
，使其与
html网页包插件一起正常工作：


webpack.common.js

{
输出：{
// ...
公共路径：“/”，
},
}
确保将
url加载程序
litmit设置为
true
。根据，将其设置为
true
是默认选项，并且对要转换为base64的文件大小没有限制

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

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

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

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

从“../public/image.png”导入MyImage
您的html文件是如何使用的？@tmhao2005它只是一个普通的html文件，我通过使用本地服务器或将其托管在coloudI中在浏览器中打开。这意味着您的html是如何通过webpack构建的。这是通过HtmlWebpackPlugin插件实现的吗？@tmhao2005我在网页包方面不是很在行，这是配置我在网页包方面不是很在行，这是配置，所以你的解决方案考虑了现有的配置吗？因为我已经给了你一个答案，你检查过了吗？是的，请查看我更新的配置，似乎
html加载器
不起作用，我将
url加载器
选项粘贴到dev config中进行测试，同样的效果也不起作用。我试着玩弄命令，但没有帮助我再次为你更新了答案