How to deal with css file's url

[sunopar]

This is my webpack.config.js

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
var path = require('path');
var extractCSS = new ExtractTextPlugin('css/[name].css');
module.exports = {
    entry:{
        app:'./src/main.js',
        'vendors':['vue']
    },
    output:{
        path:'./bin',
        publicPath:'bin',
        filename:'js/[name].bundle.js'
    },
    devtool:"#source-map",
    module:{
        loaders:[
          {test:/\.vue$/,exclude:/node_modules/,loader:'vue'},
          { test: /\.css$/,
            exclude:/node_modules/,
            loader: extractCSS.extract("style", "css")
          },
          {test:/\.jsx?$/,exclude:/node_modules/,loader:"babel"},
          {test:/\.html$/,exclude:/node_modules/,loader:"raw-loader"},
          {test:/\.(scss|sass)$/i,exclude:/node_modules/,
            loader:extractCSS.extract(['css','sass'])
          },
          {test:/\.(png|jpe?g|gif)$/,exclude:/node_modules/,loader: 'url-loader?limit=1024&name=/assets/[name].[ext]'}
        ]
    },

    plugins:[
        new webpack.optimize.CommonsChunkPlugin('vendors','js/vendors.js'),
        extractCSS,
        new HtmlWebpackPlugin({
            template:path.resolve(__dirname,'src/module.html'),
            title:'sunopar\'s World',
            filename:'../index.html'
        })
    ],
    babel: {
         presets: ['es2015','stage-2'],
         plugins: ['transform-runtime']
    },
    vue:{
        loaders:{
          js:'babel',
          scss:extractCSS.extract(['css','sass']),
          css:extractCSS.extract("style-loader", "css-loader")
        }
    },
    externals:{
        "bootstrap":"bootstrap",
        "jquery":"jQuery"
    }

}

this is my directory

|-bin
  |- assets
  |-css
  |-js
|-index.html

When i run webpack,the css file's url doesn't match my direcory.

//  bin/css/app.css
background: url(bin/assets/office3.png) no-repeat;

but it shoule be

background:url(../assets/office3.png) no-repeat;

[zhbhun]

I think "relative urls to images in css point to the wrong place" can help you!

[bebraw]

The trick might be in adjusting publicPath. Please use SO if still relevant.