webpack loader对路径的处理

<img src="assets/images/logo.png" slot="logo">
<img src="/assets/images/logo.png" slot="logo">
<img src="./assets/images/logo.png" slot="logo">

这里有几种路径, 比如现在是html-loader来处理这段代码, <img src="assets/images/logo.png" slot="logo"> 中的路径assets/images/logo.png 在webpack中, 会直接跳过, 即不会处理这种路径.这里webpack将其作为绝对路径来处理.可以修改此路径为<img src="assetsssss/images/logo.png" slot="logo"> 即实际不存在,webpack也不会报错. 因为将其作为绝对路径来处理. (注意在浏览器环境中,会将其作为相对路径)

<img src="/assets/images/logo.png" slot="logo">同上, webpack不会处理绝对路径

<img src="./assets/images/logo.png" slot="logo"> 对于这种显示声明为相对路径的, 相应的loader就会将其作为依赖模块来处理, 此时可能就调用file-loader来处理了, 那么路径就有可能改变.

So, 如果不需要webpack的loader处理某些静态资源(图片,字体等)的话, 那么在引用静态资源时, 就不要写成明显的相对路径. 一般最好是写成这种assets/images/logo.png, 最好是不要写成绝对路径(不灵活). 总之, <img src="assets/images/logo.png" slot="logo"> 要在你的webpack-dev-server 中能过访问的到. 即assets这个文件要在你静态服务器相关的目录中

cycold / cycold.github.io

webpack loader对路径的处理 #123