webpack 单独提取 css,为什么 url-loader 生成图片的路径正确,css 中图片的路径不正确?

我在 js 中使用 require("layer-dialog/src/skin/layer.css"); 引用 css,该 css 中引用了 layer-dialog/src/skin/default/icon.png,然后我在 webpack.config.js 中做了如下配置:

{
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'url',
    query: {
        limit: 15000,
        name: 'imgs/[name].[ext]?[hash:7]'
    }
}

编译后图片正确的生成在了指定的路径上,但是 css 的路径不对,
文件生成的实际的路径是 D:\\demo\\imgs\\node_modules\\layer-dialog\\src\\skin\\default\\icon.png
但是 css 中图片的路径变成了是 /imgs/node_moduleslayer-dialogsrcskindefaulticon.png
没有了路径的斜杠 /

所以很头疼不知道怎么解决。

补充:

我后来看了打包后的 js 文件,里面路径是这样的:

"imgs/node_modules\\\\layer-dialog\\\\src\\\\skin\\\\default\\\\icon.png?551539f"
阅读 6.7k
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题