Soy nuevo en webpack. Estoy usando node.js como servidor y quiero que el servidor envíe un archivo como respuesta. Para ruta / quiero enviar index.html , para ruta /other quiero enviar other.html , y así sucesivamente...

Por el momento, todos los archivos html llaman a los archivos js usando <script> . Por ejemplo, index.html contiene <script src='../index.js'></script> .

Hace unos días me presentaron con webpack. La configuración de mi paquete web es la siguiente

 const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); const commonHtmlPluginProps = { inject: false, minify: { removeAttributeQuotes: true, minifyJS: true, removeComments: true, collapseBooleanAttributes: true, collapseWhitespace: true, sortClassName: true } } module.exports = { mode: 'production', entry: { // index: './src/index.js', // another: './src/another.js', // other: './src/other.js', index: './src/html/index.html', another: './src/html/another.html', other: './src/html/other.html', }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'src', 'html', 'index.html'), ouptutName: 'index.html', ...commonHtmlPluginProps, }), new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'src', 'html', 'another.html'), filename: 'another.html', ...commonHtmlPluginProps, }), new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'src', 'html', 'other.html'), filename: 'other.html', ...commonHtmlPluginProps, }), ], module: { rules: [ { test: /\.html$/, use: ['html-loader'] } ], }, output: { path: path.resolve(__dirname, 'dist'), filename: 'js/[name].[contenthash].js' }, }

y tengo la siguiente estructura de archivos

Cada vez que reconstruyo el proyecto, obtengo dos copias de los archivos js, aunque mi entrada sea de archivos html.

¿Dónde me equivoco? Sugiérame una mejor manera. ¡Gracias por adelantado!