淘先锋技术网

首页 1 2 3 4 5 6 7

场景:

在做webpack5打包图片资源时,发现图片无法显示,各种报错,特此记录一下。

插件版本:

  • “webpack”: “^5.52.1”,
  • “webpack-cli”: “^4.8.0”

1.针对 css 中引入的资源

方法一:

使用 url-loader 处理图片资源,添加 type: ‘javascript/auto’ 使得webpack5中能够支持旧版语法。

需要下载插件:

webpack.config.js 中配置:

{
    // 处理图片资源
    test: /\.(jpg|png|gif)$/,
    // 下载 url-loader file-loader
    loader: 'url-loader',
    options: {
        publicPath: './img', // 相对打包后的index.html的图片位置
        outputPath: 'img/', // 输出到build的目录img下
        // 图片小于 10kb,会被 base64处理
        // 优点:减少请求数量(减轻服务器压力)
        // 缺点:图片体积会更大(文件请求速度更慢)
        limit: 10 * 1024,
        // 问题:url-loader默认使用es6模块化解析,而html-loader引入图片是commonjs,解析时会出现问题:[object Module]
        // 解决:关闭url-loader的es6模块化,使用commonjs解析
        esModule: false,
        // 给图片重命名
        // [hash:6] 取图片的hash的前6位
        // [ext] 取文件原来的扩展名
        name: '[name].[hash:6].[ext]'
    },
    type: 'javascript/auto', //在webpack5中使用旧版功能
},

方法二:

使用webpack5内置的 assets module 处理(url-loader已废弃)

{
    // 处理图片资源
    test: /\.(jpg|png|gif)$/,
    // webpack5中使用assets-module(url-loader已废弃)
    type: 'asset',
    parser: {
        dataUrlCondition: {
            maxSize: 10 * 1024
        }
    },
    generator: {
        filename: 'img/[name].[hash:6].[ext]',
        publicPath: './'
    }
},

2.针对 html 中 img 标签图片

将 html-loader 更换为 html-withimg-loader

下载插件:

webpack.config.js 中配置:

{
    test: /\.html$/,
    // 处理html文件的img图片(负责引入img,从而能被url-loader处理)
    // webpack5中使用 html-withimg-loader代替
    // loader: 'html-loader'
    loader: 'html-withimg-loader'
}

打包后文件:
在这里插入图片描述
图片名:文件名 + hash值(前6位) + 后缀,小于10kb的图片会转成base64位编码


wepack官网:https://webpack.docschina.org/