5.webpack打包图片资源

1.根据图片目录新建文件

2.index.js中引入css

import "./index.less"

3.写less样式

 .imgbox1 {
   width: 300px;
   height: 300px;
   background-image: url("./1.png");
   background-repeat: no-repeat;
   border: 1px solid #000;
  }

4.webpack.config.js配置文件

1.url-loader

作用：处理图片资源

缺点：默认处理不了html中的img图片

loader：url-loader ，file-loader（url-loader依赖与file-loader）

   {     test: /\.(jpg|png|gif)$/,
         loader: 'url-loader',
    },

2.添加配置options

作用：图片大小小于8kb，就会被base64处理

优点：被base64处理了的，会减少请求次数（减轻服务器的压力）

缺点：图片会有一点大，文件请求速度会慢一点

options: { limit: 8 * 1024, }

3.图片名字重命名 [hash:10]:取图片hash的前10位 [ext]：取文件原来的扩展名 options: { name: '[hash:10].[ext]', }

4.处理html里的图片

loader：html-loader

作用：处理html文件的img图片（负责引入img，从而能被url-loader进行处理)

缺点： url-loader引入图片是使用es6模块，html-loader是使用commonJs引入图片

解析时会出现问题：【object moudel】

问题解决：关闭url-loader的es6模块化，使用commonjs解析

  {     test: /\.html$/,
        loader: 'html-loader'
  }
   options: { esModule: false, }//关闭url-loader的es6模块化

5.总webpack配置

  module: {
  rules: [{
      test: /\.less$/,
      use: [
      "style-loader",
      "css-loader",
      "less-loader"
           ]
     },
     {
      test: /\.(jpg|png|gif)$/,
      loader: 'url-loader',
      options: {
      limit: 8 * 1024,
      esModule: false,
      name: '[hash:10].[ext]'
     }
   },
     { test: /\.html$/,
       loader: 'html-loader'
     }