Webpack injecting wrong file names

305 Views Asked by At

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?

0

There are 0 best solutions below