在一個main.js中require一個scss文件,scss文件中用了背景圖片,圖片url是用的相對路徑,用extract-text-webpack-plugin插件提取出的css文件背景圖片路徑不對,解決這個問題其實很簡單,就是在output選項中配置publicPath屬性,值為"http://localhost:端口號/",后面的斜杠符合"/"必須有,這樣生成的背景圖片url路徑就是絕對路徑了,這樣就能正確加載出圖片了。
1 output:{ 2 publicPath:'http://localhost:8088/', 3 path:__dirname + '/public', //通過HtmlWebpackPlugin插件生成的html文件存放在這個目錄下面 4 filename:'js/[name].js', //編譯生成的js文件存放到根目錄下面的js目錄下面,如果js目錄不存在則自動創建 5 /* 6 * chunkFilename用來打包require.ensure方法中引入的模塊,如果該方法中沒有引入任何模塊則不會生成任何chunk塊文件 7 * 比如在main.js文件中,require.ensure([],function(require){alert(11);}),這樣不會打包塊文件 8 * 只有這樣才會打包生成塊文件require.ensure([],function(require){alert(11);require('./greeter')}) 9 * 或者這樣require.ensure(['./greeter'],function(require){alert(11);}) 10 * chunk的hash值只有在require.ensure中引入的模塊發生變化,hash值才會改變 11 * 注意:對於不是在ensure方法中引入的模塊,此屬性不會生效,只能用CommonsChunkPlugin插件來提取 12 * */ 13 chunkFilename:'js/[chunkhash:8].chunk.js' 14 }
不只css中的背景圖片地址是絕對路徑,html文件中引入的css和js都是絕對路徑。