如果你在CSS中引用了图片，那么：

 

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

 

 

 直接打包会报错 我们需要 图片处理，我们使用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也是你自己➕：

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/

 

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