39-3 webpack 图片引用 Loader 的安装使用(不实现)

如果你在CSS中引用了图片,那么:

 

这里两张照片  1张a 一张b  a是大于8KB b 是小于8KB的:

39-3 webpack 图片引用 Loader 的安装使用(不实现)

 

 

 直接打包会报错 我们需要 图片处理,我们使用url-loader来处理,依然先安装url-loader:

npm install --save-dev url-loader

安装即可 版本自己加  或 不加

添加配置:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: ‘url-loader‘,
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

其中 test 中后可以配置多个后缀名,用|分隔即可,limit是限制大小(单位是 b)limit默认大小为8KB,引用的图片大小 小于 这个limit的话 会通过base64显示出来的,超出的话则 要打包不了,这时候我们应该安装file-loader 进行解析,当然 limit 是可控的,其次test也是你自己?:

39-3 webpack 图片引用 Loader 的安装使用(不实现)
const path = require(‘path‘)        //请先执行 npm init   先安装NODE一些相关东西

module.exports = {
    //入口: 可以是字符串、数组、对象,这里我们入口只有一个,所以写一个字符串即可
    entry:‘./src/main.js‘,
    //出口,通常是一个对象,path是路径(绝对路径),filename是导出的文件名
    output:{
        path:path.resolve(__dirname,‘dist‘),
        filename:‘bundle.js‘
    },
    
     module: {
    rules: [
        
        //CSS 和  style Loader
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      
      //less 和 less-loader
      {
              test: /\.less$/i,
              loader: [
                // compiles Less to CSS
                ‘style-loader‘,
                ‘css-loader‘,
                ‘less-loader‘,
              ],
            },
      //url-Loader
       {
              test: /\.(png|jpg|gif)$/,
              use: [
                {
                  loader: ‘url-loader‘,
                  options: {
                    limit: 8192         //这就用默认大小8KB吧
                  }
                },    
    ],
  },
  

     
    
    
    
    
    }

    
webpack.config.js

然后打包运行即可,,

 

如果图片大于你设置的limit 那么就安装 file-loader  , 命令: npm install file-loader --save-dev

其次添加 配置:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: ‘file-loader‘,
          },
        ],
      },
    ],
  },
};

 

过程不说了 直接干  可以发现dist打包文件加多了一个图片 那个图片是用32位hash值命名的,目的是防止名字重复。

其次 我们还得在 webpack.config.js 中的 output哪里 加上publicPath:"dist/"  那样路劲才能找对。 

所以,我们可以在options中添加上如下选项:
? img:文件要打包到的文件夹
? name:获取图片原来的名字,放在该位置
? hash:8:为了防止图片名称冲突,依然使用hash,但是我们只保留8位
? ext:使用图片原来的扩展名
? 但是,我们发现图片并没有显示出来,这是因为图片使用的路径不正确
? 默认情况下,webpack会将生成的路径直接返回给使用者
? 但是,我们整个程序是打包在dist文件夹下的,所以这里我们需要在路径下
再添加一个dist/

 

这里就不实现了 学个逻辑即可。 

 

39-3 webpack 图片引用 Loader 的安装使用(不实现)

上一篇:图解phpstorm常用快捷键


下一篇:网页浏览器缓存优先级释疑