How to use webpack packaged multi-page and the css, js, img each page in a directory folder?

HTML CSS JS IMG encounter situations need to be packaged separately, although many are now automated packaging, but sometimes still biased in favor of custom, it is to write according to their needs, packaged and how to configure and output paths. To intervene in the packaging process

Based on the last single package file. Do some upgrades

The final package out of the document is this?

I'll run the results hold up,

Packaged config as follows

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// const Uglifyjs = require('uglifyjs-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
module.exports = {
    entry:{
        ap:'./src/js/page_ap.js',
        sat:'./src/js/page_sat.js',
        sat2:'./src/js/sat2.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name]/js/index.js?[hash]'
    },
    mode:'development',
    module:{
        rules:[
            {
                test: /\.html$/,
                loader: 'html-withimg-loader'
            },
            {
                test:/\.jsx?/,
                include:[
                    path.resolve(__dirname,'src')
                ],
                use:'babel-loader'          
            },
            {
                test:/\.css$/,
                include:[
                    path.resolve(__dirname,'src')
                ],
                use:ExtractTextPlugin.extract({
                    fallback:'style-loader',
                    use:'css-loader'
                })
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                  {
                      loader:'url-loader',
                      options:{
                          limit:10240,
                          outputPath:'./asset/img',
                          name:'[name].[hash].[ext]',
                        //   PublicPath:''
                      }
                  }
                ]
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new ExtractTextPlugin('[name]/css/[name].css'),
        new HtmlWebpackPlugin({
                title:'ap',
                filename:'/ap/index.html',
                template:'src/ap/index.html',
                chunks:['ap']
        }),
        new HtmlWebpackPlugin({
            title:'sat',
            filename:'sat/index.html',
            template:'src/sat/index.html',
            chunks:['sat']
        }),
        new HtmlWebpackPlugin({
            title:'sat2',
            filename:'sat2/index.html',
            template:'src/sat2/index.html',
            chunks:['sat2']
        }),
        // new Uglifyjs()
    ]
}

Finally, posted a directory structure, in fact, the real project more complicated than this, maybe mess

You can see that there are some problems, not smart enough, not automatically need to find all paths, the path because the project was chaotic, not enough thorough research of your own, if you can help, or you can help me welcome message.