版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m_review/article/details/80229880
你需要提前知道的
在用 webpack 处理打包时,可以将某一个目录配置一个别名,代码中可以使用与别名的相对路径引用资源。
alias 通道: https://doc.webpack-china.org/configuration/resolve/#resolve-alias
具体使用
在 webpack 中配置:
...,
resolve: {
...,
alias: {
'Src': resolve('src')
}
}
你可以这样使用:
import xxx from "Src/...";
来代替:
import xxx from "路径/src/...";
这样做的好处是:当你改变目录的位置的时候,不需要在每个引入它的地方进行更改,只需要更改 webpack 中的配置就可以了。
引用非 js 文件的静态资源
各类非 js 直接引用(import require)静态资源,会出现问题。
例如:
在 webpack 中配置:
resolve: {
...,
alias: {
'Css': resolve('css')
}
}
错误使用:
@import "Css/...";
报错:”找不到 ‘Css’ 目录”。 说明 webpack 没有正确识别资源相对路径。
原因:css 文件会被 css-loader 处理,这里的”Css/…”会被 css-loader 当做绝对路径处理。因为我们并没有添加 css-loader 的 alias,所以报错啦。
解决:
在 webpack 中 css import 使用 alias 相对路径的解决办法有两种:
直接为 css-loader 添加 alias 的路径。
在引用路径的字符串前面加上 ~ 的符号,如:@import “~Css/…”。webpack 会以~符号作为前缀的路径视为依赖模块去解析。
正确使用:
@import "~Css/...";
总结
~ 视为模块解析是 webpack 做的事,不是 css-loader 的事。
各类非 js 直接引用(import require)静态资源,依赖相对路径加载的问题都可以使用~语法完美解决。
例如:
- css module 中: @import “~Css/…”;
- css 属性中: backaground:url(‘~Image/…’)
- html 标签中:
<img src="~Image/..."/>