关于webpack里面图片打包的路径问题-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

关于webpack里面图片打包的路径问题

2016-03-13 12:00:39 8859 1
output: {
        path: path.resolve(__dirname, "./build"),
        filename: js/[name].js",
        publicPath:""
    },
loaders: [{
        test: /\.(png|jpg|jpeg|gif)$/,
        loader: 'url?limit=10000&name=img/[name].[ext]'
}]

配置差不多就是这样子,我这样打包出来以后无论怎么调配置,css里面的图片引用路径都是
background: url("/img/XXX.png") no-repeat;这样就会在根目录下面找img文件夹,但是我不想这样,能不能使他打包出来成这样=> background: url("../img/XXX.png") no-repeat;就是可以自定义css里面url的引用路径(前面多2个点)

url("/img/XXX.png")=====> url("../img/XXX.png")

取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:02:26

    用相对路径是会有这个问题,两种解决方案:

    源码图片路径和打包后的图片路径保持一致,比如:源码图片是放在/src/img/a.png下,引用图片的的css路径是/src/style/a.css, 这时候a.css的引用写法是 url("../img/a.png");
    打包后的图片路径是放在/build/img/a.png,引用图片的的css路径是/build/style/a.css, 这时候a.css的引用写法还是 url("../img/a.png"),这时候就不会出问题
    2.webpack.config.js使用绝对路径publicPath:

    output: {

        publicPath:'/'

    }
    这样所有资源文件的路径都会把publicPath放到前面,就不会有路径问题了

    0 0
相关问答

1

回答

Webpack中,如何激活loader?

2021-11-22 16:25:12 179浏览量 回答数 1

1

回答

Webpack中,使用loader的方式有哪些?

2021-11-22 16:24:20 201浏览量 回答数 1

1

回答

Webpack中loader支持链式传递吗?

2021-11-22 16:16:34 173浏览量 回答数 1

1

回答

Webpack核心概念中的loader(转换器)指的是?

2021-10-22 10:13:30 375浏览量 回答数 1

1

回答

关于Webpack,你有哪些看法呢?

2021-11-22 19:21:01 301浏览量 回答数 1

2

回答

webpack打包vue速度太慢怎么办?

2020-05-23 15:50:30 2901浏览量 回答数 2

0

回答

(9x8hk)18669144449 安装这款插件模板图片直接套用

2019-02-15 20:45:57 1707浏览量 回答数 0

1

回答

安卓外壳与webview里面的html环境之间如何交互图片?

2016-06-15 16:08:15 1817浏览量 回答数 1

1

回答

关于jquery实现在ul下添加一张图片自动给该图片添加一个li标签问题

2016-06-02 17:39:36 3959浏览量 回答数 1

1

回答

高手指教。请推荐书或网站。上位机,虚拟仪器用C/.C++实现

2016-03-19 14:01:06 1723浏览量 回答数 1
+关注
0
文章
14879
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载