欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

webpack使用图片配置

程序员文章站 2024-02-01 14:29:22
...
  1. 在webpack中加载图片时,需要知道图片的大小。在加载图片之前,在src文件夹下创建img文件夹用来存放图片
  2. 将图片导入img文件夹下之后,安装url-loader,命令为:npm install --save-dev url-loader,之后在webpack.config.js文件的rules中添加以下内容
// 导入图片
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // limit代表图片最大的大小,图片小于limit时,在加载该图片时会将图片编译为base64形式的字符串
              // 超过limit的图片会被压缩到dist文件夹中
              limit: 12000,
              // 对打包到dist文件的图片进行重新命名
              // 加上中括号代表这是一个变量,根据要打包的图片进行相应的修改
              // [name]代表图片名称;[hash:8]代表8位自动生成的哈希值;[ext]代表图片的后缀名
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      }
  1. 其中limit代表图片的大小,单位为B,小于limit的图片与大于limit的图片会执行不同的操作来显示在页面上

小于limit的图片

  1. 在进行以上操作之后,对css文件进行修改,将该图片显示为背景图片
body {
    background-image: url("../img/test1.jpg") ;
}
  1. 对项目进行打包,可以正常显示该图片
  2. 在显示图片时,webpack会将该图片编译为base64字符串进行调用
    webpack使用图片配置

大于limit的图片

  1. 首先将该图片设置为背景图片
body {
    background-image: url("../img/test2.png") ;
}
  1. 大于limit的图片,首先需要安装file-loader,命令为:npm install file-loader --save-dev
  2. 安装成功之后,对项目进行打包后,发现会将该图片打包到dist文件夹中,并且使用哈希值命名,不方便我们使用,需要在打包时规定打包之后的图片的命名方式
  3. 在weboack.config.js文件中的options的属性中添加name属性,格式为:img/[name].[hash:8].[ext]。代表打包后的图片存放在dist文件夹下的img文件夹中,并且名称为图片的名称.8位任意哈希值.后缀名
options: {
              // limit代表图片最大的大小,图片小于limit时,在加载该图片时会将图片编译为base64形式的字符串
              // 超过limit的图片会被压缩到dist文件夹中
              limit: 12000,
              // 对打包到dist文件的图片进行重新命名
              // 加上中括号代表这是一个变量,根据要打包的图片进行相应的修改
              // [name]代表图片名称;[hash:8]代表8位自动生成的哈希值;[ext]代表图片的后缀名
              name: 'img/[name].[hash:8].[ext]'
            }

webpack使用图片配置
5. 当打包项目之后,无法在页面中显示该图片信息。在页面中无法获取到打包后图片的路径,在webpack.config.js文件的output属性中添加publicPath,代表打包所有的url地址时默认在开头添加publicPath的内容

output: {
    // 出口文件的路径,使用绝对路径
    path: path.resolve(__dirname, 'dist'),
    // 出口文件名称
    filename: 'bundle.js',
    // 添加dist文件夹路径,当在项目中出现url地址时,会默认在最前面添加publicPath的内容
    publicPath: 'dist/'
  }
  1. 打包项目,背景图片正常显示
    webpack使用图片配置
相关标签: Vue基础