如何使用webpack打包多頁面並且使 css，js，img在各自頁面的目錄文件夾下?

遇到HTML CSS JS IMG 需要單獨打包的情況了，雖然現在很多都是自動化打包了，但有些時候還是偏向於定制，就是根據自己的需求去編寫，打包的方法以及配置和輸出的路徑。對打包過程進行干預

基於上次的單文件打包。做一下升級

最終打包出來的文件是這樣的？

運行結果我就不放了，

打包的config如下

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()
    ]
}

最后貼一張目錄結構吧，其實真實項目比這個復雜多了，可能很亂

可以看得出來還是有一些問題的，不夠智能，不能自動需找所有路徑，因為項目路徑比較亂，自己研究的還不夠透徹，如果能幫到你，或者你能幫我，歡迎留言。