webpack 之(5) webpack.config.js配置 之 img

webpack5的版本 后面有版本会单独出一篇文章

通过load打包img文件

   注意内容

         url-loader 和 file-loader是一起的,若是less里面用到了图片那就没关系

         若是html中用了img标签引用图片,那么打包后就会出现问题,图片显示不出来,这个问题一直都存在,不知如何解决

         html-loader不是处理html文件的,而是处理html文件中的img图片的

        

 

打包前的html文件内容

 

 

 

/* 
强调一下:
 自己测试得到的结果
 

在目前的最新的webpack版本中并没有出现以下问题:
 解析时会出问题:[object Module]
 //解决:关闭url-loader的es6模块化,使用commonjs解析
*/
const {resolve} = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
module.exports ={
  entry:'./src/index.js',
  output:{
    filename:'built.js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      {
        test:/\.less$/,
        use: [
          'style-loader',
          'css-loader',
          //将less文件编译成css文件
          //需要下载less-loader和less
          'less-loader'
        ]
      },
      {
        test: /\.(jpg|png|gif)$/,
        //还需下载 file-loader
        loader:'url-loader',
        options: {
          //图片大小小于8kb,就会被base64处理
          //优点:减少请求数量(减轻服务器压力)
          //图片体积会更大
          limit:8*1024,
          /* 问题:因为url-loader默认使用es6模块化解析,而html-loader引入图片是commonjs
          解析时会出问题:[object Module]
          //解决:关闭url-loader的es6模块化,使用commonjs解析
          */
          esModule:false,

　　　　　　 /* 

             [hash:10]取图片的hash的前10位

             [ext]取文件原来扩展名

           */

            name: '[hash:10].[ext]'

　　　　 }
      },
      {
        test:/\.html$/,
        //处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
        loader:'html-loader',
      }
    ]
  },
  plugins:[
    new HtmlWebPackPlugin({
      template:'./src/index.html'
    })
  ],
  mode:'development'
}