webpack4+babel7入门到精通(四、图片的加载)

一、使用file-loader加载图片

• 1、安装包

  npm install file-loader -D
  

• 2、在js中使用

  let src = require('./images/default.jpeg');
  let img = new Image();
  img.src = src;
  document.body.appendChild(img);
  

• 3、配置规则

  {
  	test: /\.(png|jpg|gif|svg|bmp|jpeg)$/,
  	use: 'file-loader',
  },
  

二、在css文件中写背景图片

• 1、样式文件

  #box {
    width: 100px;
    height: 100px;
    border: 2px solid #333;
    background: url('./../images/default.jpeg');
    background-size: cover;
  }
  

• 2、在webpack.config.js中需要配置

  ...
  {
  	test: /\.(png|jpg|gif|svg|bmp|jpeg|eot|woff|woff2|ttf)$/,
  	use: [
  		{
  			loader: 'url-loader',
  			options: {
  				limit: 5 * 1024, // 指定多大的图片
  				outputPath: 'images', // 指定拷贝文件输出目录
  				publicPath: '../../images/', // 根据webpack根目录跳转到图片路径
  				// name: '[name].[hash:8].[ext]',
  			}
  		}
  	]
  },
  ...
  

三、如果要在页面中直接使用图片标签

• 1、安装包

  npm install html-withimg-loader -D
  

• 2、配置规则

  {
  	test: /\.(html|htm)$/,
  	use: [
  		{
  			loader: 'html-withimg-loader',
  		}
  	]
  }
  

• 3、使用

  <img src="./images/default.jpeg" width="200" height="200"/>
  

四、使用base64处理图片

• 1、file-loader是解析图片地址,把图片从源位置拷贝到目标位置并且修改源引用

• 2、url-loader可以将比较小的文件,直接转换为base64字符串嵌套在页面中

  {
  	test: /\.(png|jpg|gif|svg|bmp|jpeg|eot|woff|woff2|ttf)$/,
  	use: [
  		{
  			loader: 'url-loader',
  			options: {
  				limit: 5 * 1024, // 指定多大的图片
  				outputPath: 'images/', // 指定拷贝文件输出目录
  			}
  		}
  	]
  },