Quiero obtener la estructura de carpetas completa en la salida. Pero ahora, si uso el comando de inicio de ejecución npm, no carga index.html y Chrome da un error Cannot GET /. Y con el comando npm run build, index.html no carga estilos. ¿Puedes ayudar con esto por favor? Configuración de mi paquete web:

 const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') module.exports = { entry: { 'pages/main/index' : './src/pages/main/index.js', 'pages/pets/pets' : './src/pages/pets/pets.js' }, output: { filename: '[name].js', path: path.resolve(__dirname, 'dist'), publicPath: '', assetModuleFilename: (pathData) => { const filepath = path .dirname(pathData.filename) .split("/") .slice(1) .join("/"); return `${filepath}/[name].[hash][ext][query]`; }, }, mode: 'development', module: { rules: [ { test: /\.html$/i, loader: "html-loader", }, { test: /\.s[ac]ss$/i, use: [ MiniCssExtractPlugin.loader, "css-loader", "sass-loader", ], }, ], }, plugins: [ new HtmlWebpackPlugin({ template: './src/pages/main/index.html', filename: './pages/main/index.html', excludeChunks: ['pages/pets/pets'] }), new HtmlWebpackPlugin({ template: './src/pages/pets/pets.html', filename: './pages/pets/pets.html', chunks: ['pages/pets/pets'] }), new MiniCssExtractPlugin({ filename: '[name].css', chunkFilename: "[id].css" }), ], devServer: { compress: true, port: 3000, }, }