0
点赞
收藏
分享

微信扫一扫

webpack5打包图片

妖妖妈 2022-03-30 阅读 51
webpack

webpack4方法如下:

{
        test: /\.(jpg|png|gif)$/,
        // 要使用一个loader
        // 下载 url-loader file-loader
        dependency: { not: ['url'] },
        use:[
         { 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]'
         },}
        ],
        type: 'javascript/auto'
      },{
        test: /\.html$/,
        // 处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
        loader: 'html-loader',
      }

webpack5方法如下:

{
        // 处理图片资源  webpack5图片新打包方法
        test: /\.(jpg|png|gif)$/,
        // webpack5中使用assets-module(url-loader已废弃)
        type: 'asset',
        parser: {
            dataUrlCondition: {
                maxSize: 10 * 1024
            }
        },
        generator: {
            filename: 'img/[name].[hash:6][ext]',
            publicPath: './'
        }
    },{
      test: /\.html$/,
      // 处理html文件的img图片(负责引入img,从而能被url-loader处理)
      // webpack5中使用 html-withimg-loader代替
      // loader: 'html-loader'
      loader: 'html-withimg-loader'
  }
举报

相关推荐

0 条评论