Webpack is injecting script file names into my HTML file that are different from the names of the files it is actually generating.
I have a home page HTML file with these script tags:
<script src="../../node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
When Webpack runs, it replaces these with:
<script src="85761405769dc8200d72.js"></script>
<script src="60b468ae637714521bff.js"></script>
But no files with these names are generated. Instead, the files it is actually outputting to the \dist folder are:
ca85d1be53e78eca8867.js
a2c8e7797f575befb909.js
So, I get 404 Not Found errors when the browser tries to load the files referenced in the HTML file.
My entry and output configuration is:
entry: {
polyfill: ["core-js/stable", "regenerator-runtime/runtime"],
home: "./src/home/home.ts",
},
output: {
devtoolModuleFilenameTemplate: "webpack:///[resource-path]?[loaders]",
clean: true,
},
The HtmlWebpackPlugin configuration is:
new HtmlWebpackPlugin({
filename: "home.html",
template: "./src/home/home.html",
chunks: ["polyfill", "home"],
}),
Any ideas on why mismatched file names are being created?
Or, failing that, is there any way to get Webpack to just leave the original <script> tags as they are?
