webpack4 圖片路徑的問(wèn)題

這是我的webpack目錄

我在src/css目錄下的css里寫(xiě)background:url(../images/xx.jpg)
npm run build
輸出目錄dist/css目錄下的CSS里是background:url(images/xx.jpg)
于是我百度在output 加個(gè) publicpath： ../images
輸出的CSS是正常了
src下的html 里寫(xiě)<img src=images/xx.jpg/>
輸出的html 里就變成 <img src=../images/xx.jpg/>

感覺(jué)這兩個(gè)路徑是沖突的，好坑阿

回答

編輯回答

陌璃

一種方案是把主css文件拿出來(lái)，放在跟html同級(jí)目錄下，其他的css,sass之類(lèi)的引入index.js。最后都會(huì)進(jìn)到index.css中的，也就是說(shuō)其實(shí)這就是變通一下，并沒(méi)有根本解決打包到dist中的css文件如果都在css文件夾中所存在的路徑問(wèn)題

2018年2月17日 04:50

編輯回答

礙你眼

我遇到了同樣問(wèn)題,已經(jīng)解決
html和css中都引用了圖片,html在dist根目錄下,css在dist/mg目錄下,使用相對(duì)路徑生成的圖片路徑是一樣的,但是html和css目錄結(jié)構(gòu)不一樣,導(dǎo)致總有一方引用不到圖片.現(xiàn)在把output的publicPath參數(shù)改成絕對(duì)路徑解決了問(wèn)題.

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

項(xiàng)目地址:https://github.com/yanxiaojun...

2017年11月27日 16:57

編輯回答