• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

165
Views
Webpack injecting wrong file names

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?

about 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error