webpack打包react的图片路径问题

我在react组件里面引入图片或是css背景图片这种,用webpack打包出来,路径总是不对

        entry:'./src/entry.js',
output:{
    path:__dirname + '/assest/',
    filename:'app.js',
    publicPath:'/temp/assest'
},
module:{
    loaders:[
        {
            test: /\.js?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel',
            query: {
                presets: ['es2015', 'react','stage-1','stage-2','stage-3']
            }
        },
        {
            test:/\.less$/,
            loader: extractTextWebpackPlugin.extract('style-loader','css-loader!less-loader')//分离出css
        },
        {
            test:/\.jpg|.png$/,
            loader:'file-loader?limit=5000&name=../img/[hash:8].[name].[ext]'
        },
        {
            test:/\.html$/,
            loader:'html-loader'
        }
    ]
},

这个是webpack的简单配置,还请指教这图片路径的问题怎么去弄呢

阅读 9.6k
3 个回答

路径不对必然是publicPath问题,贴你在开发者工具看到的浏览器的路径上来看看

less-loader 这个编译器在你写背景图片的时候会有问题,不可以用相对路径,只能用绝对路径。加localhost:3005+‘img/....'应该这样,
我用的是scss也会出现这个问题,除非你用css就可以使用相对路径。
我耶同求

你这份配置的意思是说你的实际文件输出到了当前项目的/assets/下去了,然而,你的图片路径经过打包却是/temp/assets/,不知道你是以哪个目录启的server,那个server目录下有temp目录么

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题