webpack图片打包

1、js中创建
2、css中引入
3、<img src="">
yarn add file-loader -D
适合1、2情况

module.export={
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: 'file-loader'
      }
    ]
  }
}

默认会内部生成一张图片到build,生成图片的路径返回回来
第一种情况: 图片地址要import引入，直接写图片的地址，会默认为字符串

import logo from './logo.png'

let image = new Image()
image.src = logo
document.body.appendChild(image)

第二种情况: css-loader会将css里面的图片转为require的格式

div {
  background: url("./logo.png");
}

第三种情况: 解析html中的image
yarn add html-withimg-loader -D

{
  test: /\.html$/,
  use: 'html-withimg-loader'
}

当图片小于多少，用base64
yarn add url-loader -D
如果过大，才用file-loader

{
  test: /\.(png|jpg|gif)$/,
  // 当图片小于多少，用base64,否则用file-loader产生真实的图片
  use: {
    loader: 'url-loader',
    options: {
      limit: 200 * 1024,          // 小于200k变成base64
      // outputPath: '/img/',     // 打包后输出地址
      // publicPath: ''           // 给资源加上域名路径
    }
  }
}

打包文件分类

1.图片:

{
  test: /\.(png|jpg|gif)$/,
  // 当图片小于多少，用base64,否则用file-loader产生真实的图片
  use: {
    loader: 'url-loader',
    options: {
      limit: 1,  // 200k 200 * 1024
      outputPath: 'img/'   // 打包后输出地址 在dist/img
    }
  }
},

2.css:

plugins: [
  new MiniCssExtractPlugin({
    filename: 'css/main.css'
  }),
]

希望输出的时候，给这些css\img加上前缀，传到服务器也能访问

output: {
  filename: 'bundle.[hash:8].js',   // hash: 8只显示8位
  path: path.resolve(__dirname, 'dist'),
  publicPath: 'http://www.mayufo.cn'  // 给静态资源统一加
},

如果只希望处理图片

{
  test: /\.(png|jpg|gif)$/,
  // 当图片小于多少，用base64,否则用file-loader产生真实的图片
  use: {
    loader: 'url-loader',
    options: {
      limit: 1,  // 200k 200 * 1024
      outputPath: '/img/',   // 打包后输出地址
      publicPath: 'http://www.mayufo.cn'
    }
  }
}