Webpack está inyectando nombres de archivos de secuencias de comandos en mi archivo HTML que son diferentes de los nombres de los archivos que realmente está generando.
Tengo un archivo HTML de página de inicio con estas etiquetas de script:
<script src="../../node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script>
Cuando se ejecuta Webpack, los reemplaza con:
<script src="85761405769dc8200d72.js"></script> <script src="60b468ae637714521bff.js"></script>
Pero no se generan archivos con estos nombres. En cambio, los archivos que en realidad está enviando a la carpeta \dist son:
ca85d1be53e78eca8867.js a2c8e7797f575befb909.js
Entonces, obtengo errores 404 No encontrado cuando el navegador intenta cargar los archivos a los que se hace referencia en el archivo HTML.
Mi configuración de entrada y salida es:
entry: { polyfill: ["core-js/stable", "regenerator-runtime/runtime"], home: "./src/home/home.ts", }, output: { devtoolModuleFilenameTemplate: "webpack:///[resource-path]?[loaders]", clean: true, },
La configuración de HtmlWebpackPlugin es:
new HtmlWebpackPlugin({ filename: "home.html", template: "./src/home/home.html", chunks: ["polyfill", "home"], }),
¿Alguna idea sobre por qué se crean nombres de archivo que no coinciden?
O, en su defecto, ¿hay alguna forma de hacer que Webpack deje las etiquetas <script>
originales como están?