亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

webpack 圖片處理問題

webpack 圖片處理問題

RISEBY 2018-07-12 15:13:06
情景:上面是我打包后的文件夾,然后index.html、about.html使用<img>引用圖片、文件夾css下*.css使用background:url()引用圖片。問題:上面是我打包前的開發文件,我如何在webpack中設置(使用什么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的圖片引用本人初學webpack,求解?!?018年6月29日16:25:14補充說明:剛才我自己去網上找了下,使用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貢獻1845條經驗 獲得超8個贊

可以試試這樣,統一從根目錄下獲取地址

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 的路徑

    }

}


查看完整回答
反對 回復 2018-07-15
?
GCT1015

TA貢獻1827條經驗 獲得超4個贊

使用

publicPath = '/'

試試

http://localhost:12345/index.html

按照你給的github已經驗證過了沒問題。

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

查看完整回答
反對 回復 2018-07-15
  • 2 回答
  • 0 關注
  • 403 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號