webpack打包图片

Webpack是一个强大的模块打包工具，它不仅可以处理JavaScript文件，还能对CSS、图片等静态资源进行管理。当涉及到图片打包时，Webpack会通过插件如`file-loader`或`url-loader`来处理。以下是基本流程：

1. 安装插件：对于简单的图片直接引用，可以使用`url-loader`，它会将图片转换为base64字符串；如果需要保持原图，可以安装`file-loader`。

npm install file-loader url-loader --save-dev

2. 配置规则：在Webpack配置文件（通常是webpack.config.js）中添加加载图片的规则。例如：

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i, // 匹配.png, .jpg, .jpeg, .gif文件
        use: [{
          loader: 'file-loader',   // 或者 'url-loader'
          options: {
            name: '[name].[ext]',   // 输出文件名
            outputPath: 'images/', // 输出路径
            fallback: 'file-loader', // 如果file-loader失败，尝试url-loader
            limit: 1024 * 1024,     // 图片大小限制（超过此值会被转为base64）
            publicPath: '/images/' // 公共URL路径，用于HTML引用
          }
        }]
      }
    ]
  }
};

3. 使用图片：在你的项目代码里，可以直接像引用普通JavaScript模块一样引入图片，Webpack会在编译阶段自动处理。