webpack中 ~符号是什么作用？

Question

自己下编写vue组件的过程中，看到有的人是这样css引用文件的，那么这个~起什么作用呢？

Answer 1

首先不知道别乱回答，误人呢

详见vue-cli文档 vue-cli文档链接

其实和import，require没区别，只是这种方式不能写到css或者html里面，就写成了~

再写个例子，这是我们项目中的应用

<style lang="scss">
@import '~vuetify/dist/vuetify.min.css';
@import '~leaflet/dist/leaflet.css';
@import '~leaflet-draw/dist/leaflet.draw.css';

</style>

Answer 2

Webpack 会将以 ~ 符号作为前缀的路径视作依赖模块而去解析

Answer 3

一般定位到node_modules，你可以到你webpack配置文件里面去看看

Answer 4

先到webpack配置文件里面看看有没有和~相应的路径配置

Answer 5

'~PATH'将PATH里的内容作为模块进行查询，比如在assert里的内容，可以这样显式引用