webpack图片文件打包背景图片显示不出——删除file-loader的配置代码

删除file-loader的配置代码
在官方文档中,fileloader需要导包,之后进行webpack配置,但是我照着导入file-loader后,顺便在配置了一下,结果图片显示不出来,删掉就解决了问题,有点奇怪

const path = require('path')

module.exports = {
    entry:"./src/main.js",
    output:{
        //控制台中npm init初始化一下npm,会出现一个package.json文件
        //先引入nide的全局变量path
        // _dirname是指当前路径,第二个值后面拼接一个dist,那么就拿到了绝对路径
        path:path.resolve(__dirname, "dist"),
        filename:"bundle.js",
        publicPath:"./dist/"
    },
    module: {
        rules: [
          {
            test: /\.css$/,
            //css.loader只负责css文件进行加载
            //style.loader负责将样式添加到DOm中
            //使用多个loader时,从右向左
            use: [ 'style-loader','css-loader'],
          },
          {
            test: /\.(png|jpg|gif|jpeg)$/i,
            use: [
              {
                loader: 'url-loader',
                options: {
                  // 当加载图片,小于limit时,会将图片编译成base64形式
                  // 当加载图片,大于limit时,需要使用file-loader 进行加载
                  limit: 8192
                }
              }
              //这里不添加配置
               // ,{
              //   loader: 'file-loader',
              //   options: {},
              // }
            ]
          }
        ],
      }
}

官方文档

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值