How can I remove duplicate JS bundle created by webpack4?

Question

I am trying to create JavaScript Library and CSS bundle (extracting all CSS used in a single file) using webpack 4.

My webpack.config.js file configuration is as below:

var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin"); // Require  to generate html file
var MiniCssExtractPlugin = require("mini-css-extract-plugin"); // Require  to generate css file

module.exports = {
  entry: __dirname + "/src/app/index.js", // webpack entry point. Module to start building dependency graph
  output: {    
    path: path.join(__dirname, "dist"), // Folder to store generated bundle
    filename: "chart.min.js", // Name of generated bundle after build
    library: ["Chart"],
    libraryTarget: "umd"
  },
  module: {  // where we defined file patterns and their loaders
      rules: [ 
          {
            test: /\.js$/,
            use: "babel-loader",
            exclude: [
              /node_modules/
            ]
          },
          {
            test: /\.css$/,
            use: [
              MiniCssExtractPlugin.loader,
              "css-loader"
            ],
            exclude: [
              /node_modules/
            ]
          } 
      ]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: "chart",
          test: /\.css$/,
          chunks: "all",
          enforce: true
        }
      }
    }
  },
  plugins: [  // Array of plugins to apply to build chunk
      new HtmlWebpackPlugin({
          template: __dirname + "/src/public/index.html",
          inject: "body"
      }),
      new MiniCssExtractPlugin({
        filename: "[name].css"        
      })    
  ],
  devServer: {  // configuration for webpack-dev-server
      contentBase: "./src/public",  //source of static assets
      port: 7700 // port to run dev-server
  } 
};

By running above code, I am getting following files in my dist folder "1.chart.min.js", "chart.min.js", "chart.css", "index.html"

May I know why I am getting "1.chart.min.js" file and How can I stop generating same?

Answer 1

You may like to clean the output path using clean-webpack-plugin