Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

305
Views
Webpack: Generating two different files for the same js file

I new to webpack. I am using node.js as a server and want to server send file as a response. For route / I want to send index.html, for route /other I want to send other.html, and so on...

At the moment all html files calls js files using <script>. For example, index.html contains <script src='../index.js'></script>.

Few days ago I was introduced with webpack. My webpack config is as following

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'
   },
}

and I have following file structure

dir structure

Whenever I rebuild the project I get two copies of js files, even though my entry is from html files.

Where I am mistaken? Suggest me a better way. Thanks in advance!

about 4 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 Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!