webpack-loader-回顾base64的图片优缺点

发布时间 2023-05-25 00:02:30作者: Young_Yang_Yang

打包处理样式表中与url路径相关的文件

  1. 运行 npm i url-loader file-loader -D 命令
  2. 在webpack.config.js的module->rules数组中,添加loader规则如下:
module: {
    rules: [
        //定义了不同模块对应的loader
        {test: /\.css$/, use: ['style-loader', 'css-loader']},
        //处理.less文件的loader
        {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
        //文件后缀名的匹配模块
        {test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229'}
    ]
}

其中?之后的是loader的参数项

  • limit用来指定图片的大小,单位是字节(byte)
  • 只有<=limit大小的图片,才会被转为base64格式的图片