webpack使用图片配置

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]'
            }
          }
        ]
      }

3. 其中limit代表图片的大小，单位为B，小于limit的图片与大于limit的图片会执行不同的操作来显示在页面上

小于limit的图片

1. 在进行以上操作之后，对css文件进行修改，将该图片显示为背景图片

body {
    background-image: url("../img/test1.jpg") ;
}

2. 对项目进行打包，可以正常显示该图片
3. 在显示图片时，webpack会将该图片编译为base64字符串进行调用
   

大于limit的图片

1. 首先将该图片设置为背景图片

body {
    background-image: url("../img/test2.png") ;
}

2. 大于limit的图片，首先需要安装file-loader，命令为：npm install file-loader --save-dev
3. 安装成功之后，对项目进行打包后，发现会将该图片打包到dist文件夹中，并且使用哈希值命名，不方便我们使用，需要在打包时规定打包之后的图片的命名方式
4. 在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]'
            }

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

output: {
    // 出口文件的路径，使用绝对路径
    path: path.resolve(__dirname, 'dist'),
    // 出口文件名称
    filename: 'bundle.js',
    // 添加dist文件夹路径，当在项目中出现url地址时，会默认在最前面添加publicPath的内容
    publicPath: 'dist/'
  }

6. 打包项目，背景图片正常显示