webpack中的~

Posted 2021-03-04 一江西流

比如我们可以看到一些css文件中有这样的代码：

@import ‘~antd/dist/antd.css‘;
...

那么，这个 ~ 起什么作用呢？

首先，我们来看一下URL转换规则

1、如果URL是一个绝对路径（例如 /images/foo.png），它将会保留不变。

2、如果URL以 . 开头，它会作为一个相对模块请求被解析且基于你的文件系统中的目录结构进行解析。

3、如果URL以 ~ 开头，其后任何的内容都会作为一个模块请求被解析。这意味着你甚至可以引用node模块中的资源：

<img src="~some-npm-package/foo.png" />

4、如果URL以 @ 开头，它也会作为一个模块请求被解析。它的用处在于可以在webpack中设置别名。

 

其实和import，require没区别，只是这种方式不能写到css或者html里面，就写成了~ (css /less/ sass没有用于导入相关文件的特殊语法,
所以这里添加的~实际上是为了告诉webpack这里是从根目录开始寻找，而不是相对目录。)

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

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

 

参考链接：

http://www.imooc.com/wenda/detail/522672

 https://juejin.im/post/5bf532a1518825741f626355