webpack中的使用background image时，为什么在图片路径前面加上~@才生效

Question

在vue-cli生成的工程中，如果在vue中使用background image style的话。图片的url路径必须在前面加上~@，这样在生成后，才能正确显示，否则会提示找不到图片文件。这是为什么？~应该是src路径的意思，@是什么意思呢？为什么加上~@就可以告诉load，将图片拷贝到static中去呢？

export default {
  data () {
    return {
      img: Img,
    }
  }
}
</script>

<style>
  .img1{
    width: 100px;
    height: 100px;
    background: url('~@/assets/1.jpg') center center no-repeat;
    background-size: 100px auto;
  }
  .img2{
    width: 100px;
    height: 100px;
    background-position: center center;
    background-repeat:  no-repeat;
    background-size: 100px auto;
  }
</style>

Answer 1

传送门：https://segmentfault.com/q/10...

Answer 2

这是webpack里配置了别名