webpack如何打包圖片文件

目錄結(jié)構(gòu)是這樣的，dist里面的文件是打包過后的文件

現(xiàn)在html,js,css都順利打包,唯有src下的img不知道如何打包到dist/img下。

我希望的是在src/css/index.css下 寫background:url(../img/head.jpg)，通過打包后會在dist下自動生成img文件夾，里面放著打包過后的圖片，并且路徑引用全都是對的。我大概知道要用到url-loader，但是網(wǎng)上看了很多教程，我的問題并沒有的到解決

webpack.config.js配置下

var path = require('path');
var  webpack = require('webpack');
var  HtmlWebpackPlugin = require('html-webpack-plugin');


var  ExtractTextPlugin = require("extract-text-webpack-plugin");   



module.exports={
        entry:{

        'app/dist/js/index':'./app/src/js/index.js'

        },

        module: {

            rules: [
                {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader", 
                    use: "css-loader"
                })
                },
                //es6
                {
                    test:/\.js$/, //匹配.js文件
                    //排除也就是不轉(zhuǎn)換node_modules下面的.js文件
                    exclude: /(node_modules|bower_components)/,
                //加載器  webpack2需要loader寫完整 不能寫babel 要寫 bable-loader
                    use:[{loader:"babel-loader"}]
                }
            ]

        },

        output: {
            filename: '[name].[chunkHash:5].js',
        },
        plugins:[


            new HtmlWebpackPlugin({
                filename: './app/dist/index.html',
                chunks: ['app/dist/js/index'],
                template: './app/src/page/index.html',
            }),

            new ExtractTextPlugin({
                filename: (getPath)=>{
                    return getPath('[name].[contenthash:5].css').replace('js','css')
                }
            })


        ]

}