webpack4 图片路径的问题

Question

这是我的webpack目录

我在src/css目录下的css里写background:url(../images/xx.jpg)
npm run build
输出目录dist/css目录下的CSS里是background:url(images/xx.jpg)
于是我百度在output 加个 publicpath： ../images
输出的CSS是正常了
src下的html 里写<img src=images/xx.jpg/>
输出的html 里就变成 <img src=../images/xx.jpg/>

感觉这两个路径是冲突的，好坑阿

Answer 1

用了 MiniCssExtractPlugin.loader的话，给他配置单独的 publicPath

Answer 2

一种方案是把主css文件拿出来，放在跟html同级目录下，其他的css,sass之类的引入index.js。最后都会进到index.css中的，也就是说其实这就是变通一下，并没有根本解决打包到dist中的css文件如果都在css文件夹中所存在的路径问题

Answer 3

我遇到了同样问题,已经解决
html和css中都引用了图片,html在dist根目录下,css在dist/mg目录下,使用相对路径生成的图片路径是一样的,但是html和css目录结构不一样,导致总有一方引用不到图片.现在把output的publicPath参数改成绝对路径解决了问题.

    output: {
        publicPath: '/',
    }
    
    {
        test: /\.(png|jpg|jpe?g|gif|svg)$/,
        use: 'url-loader?limit=8192&name=[name].[ext]&outputPath=static/img/'
    }

项目地址:https://github.com/yanxiaojun...

Answer 4

我的这样写可以区分开html、css中图片路径，输出后css是 background: url(../images/xx.jpg),html是<img src="images/xx.png">
在ExtractTextPlugin.extract中加publicPath:'../'，output中不用加publicPath

        {
            test:/\.css$/,
            use:ExtractTextPlugin.extract({
                fallback:"style-loader",
                use:"css-loader",
                publicPath:'../'
            })
        },
        {
            test:/\.(png|jpg|gif)$/,              
            use:[{
                loader:'url-loader',
                options:{
                    limit:5000,                       
                    name:'images/[name].[ext]'
                }
            }]                
        },