鍍金池/ 問答/HTML5  HTML/ webpack 打包html里面img標簽的圖片怎么自定義輸出路徑

webpack 打包html里面img標簽的圖片怎么自定義輸出路徑

我現(xiàn)在打包之后dist里面的圖片路徑變成這樣了
clipboard.png

用的是自帶的html-loader

{
    test: /\.html$/,
    use: {
        loader: 'html-loader',
        options: {
            // ignoreCustomFragments: [],
            // root: path.resolve(__dirname, 'src'),
            // attrs: ['img:src']
        }
    }
}

src下圖片路徑
clipboard.png
dist下的圖片路徑

clipboard.png

路徑雖然是可以顯示，項目也能運行，但是個人有強迫癥，想讓dist下的圖片路徑和src的一樣，有沒有搞定過這個問題

回答
編輯回答
浪婳

問題已經搞定了，直接修改url-loader的輸出路徑就行了

clipboard.png

另外，不知道誰誤導的，網上都說用html-withimg-loader才能搞定。。。根本沒這個必要再加個loader，直接用html-loader就行了

2017年10月31日 19:23
編輯回答
離夢

在html模版中，得使用require()來獲取圖片路徑，樓主要是不怎么會用webpack，可看下這教程webpack簡易教程，已上傳到github

2018年8月17日 05:58
編輯回答
吢涼

更新： 最后使用相對路徑“/”解決
我是用了html-loader和ExtractTextPlugin插件，因為html-loader也會走url-loader，所以在打包的時候會出現(xiàn)html里面的img路徑與css里面引用的圖片的路徑經常會有問題，比如一個是../assets一個是./assets，很頭疼，最后解決辦法是在ExtractTextPlugin > options里面加上publicPath。

2018年5月29日 22:33
編輯回答
女流氓

這是統(tǒng)一將所有圖片都到包到一個環(huán)境的，不是自定義，自定義是要這個的，例如你的 favicon.ico 要單獨打包到項目根目錄去就要這樣加載 require('file-loader?name=favicon.ico!../src/favicon.ico')

2017年3月5日 07:22
編輯回答
誮惜顏

那你css里的圖片怎么配的，我弄了html就顧不了css，只有一個url-loder，我又想把html放最外邊，css放文件夾，兩個實在調不過來

2018年9月18日 03:24