用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题

在一个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都是绝对路径。

posted @ 2016-12-14 22:07  向着太阳生  阅读(3721)  评论(0编辑  收藏  举报