第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

webpack 圖片處理問題

webpack 圖片處理問題

RISEBY 2018-07-12 15:13:06
情景:上面是我打包后的文件夾,然后index.html、about.html使用<img>引用圖片、文件夾css下*.css使用background:url()引用圖片。問題:上面是我打包前的開發(fā)文件,我如何在webpack中設(shè)置(使用什么loader如何配置),才能使webpack在打包中,看到html文件時就把引用的路徑改為./images/*.png,在看到css文件時就把引用的路徑改為../images/*.png ?個人嘗試:{  test: /\.(jpg|jpeg|png|gif|svg)$/,  use: [   'url-loader?limit=10240&name=images/[name].[ext]'  ] }上面這種方式只能正確加載html的圖片引用(使用了html-withimg-loader){  test: /\.(jpg|jpeg|png|gif|svg)$/,  use: [{   loader: 'file-loader',   options: {    name: '[name].[ext]',    publicPath: '../images/',    outputPath: 'images/'   }  }] }上面這種方式只能正確加載css的圖片引用本人初學(xué)webpack,求解。————————————————————————————2018年6月29日16:25:14補(bǔ)充說明:剛才我自己去網(wǎng)上找了下,使用publicPath可以正確解決,但是這個路徑寫死了,不太好:        {        test: /\.(jpg|jpeg|png|gif|svg)$/,         loader: 'url-loader',         options: {             limit: 10240,             name: 'images/[name].[hash:7].[ext]',             publicPath: "E:/MyWeb/jsliang-web/Webpack/webpack-6/dist"         }     },希望能有更好的答案~
查看完整描述

2 回答

?
精慕HU

TA貢獻(xiàn)1845條經(jīng)驗(yàn) 獲得超8個贊

可以試試這樣,統(tǒng)一從根目錄下獲取地址

const path = require('path')


// ...

{

    test: /\.(jpg|jpeg|png|gif|svg)(\?.*)?$/,

    loader: 'url-loader',

    options: {

      limit: 10240,

      name: path.posix.join(__dirname, 'dist/images/[name].[hash:7].[ext]'); // 后面的路徑是相對于 webpack.conf.js 的路徑

    }

}


查看完整回答
反對 回復(fù) 2018-07-15
?
GCT1015

TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超4個贊

使用

publicPath = '/'

試試

http://localhost:12345/index.html

按照你給的github已經(jīng)驗(yàn)證過了沒問題。

https://img1.sycdn.imooc.com//5b4b4b800001739808000595.jpg

查看完整回答
反對 回復(fù) 2018-07-15
  • 2 回答
  • 0 關(guān)注
  • 405 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號