CODEWITHSUNDEEP
javascriptnpmwebpackminifybundling-and-minification
austinw
austinw

Reputation: 734

How to name Webpack output file based on name of entry file?

I am trying to dynamically name the file outputted by Webpack, based on the name of the entry file. For example, my entry is named accessCodeEditor.js - and I would like the output file to be named accessCodeEditor.min.js. I thought output.filename: "[name].min.js" would do the trick according to these docs, but it named it main.min.js instead: https://webpack.js.org/configuration/output/#outputfilename

Here is my webpack.config.js file:

const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
    entry: "./web/js/pages/accessCodeEditor.js",
    optimization: {
        minimize: true,
        minimizer: [new TerserPlugin({
            test: /\.js(\?.*)?$/i
        })]
    },
    output: {
        filename: "[name].min.js",
        path: path.resolve(__dirname, "dist")
    }
};

Upvotes: 3

Views: 2432

Answers (1)

Mojtaba Hoseinpour
Mojtaba Hoseinpour

Reputation: 567

However, when creating multiple bundles via more than one entry point, code splitting, or various plugins, you should use one of the following substitutions to give each bundle a unique name...

Hi, this [name].min.js is for another purpose that mentioned above.

Did you try below method ?

const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");

const myAmazingFileName = 'accessCodeEditor';

module.exports = {
  entry: `./web/js/pages/${myAmazingFileName}.js`,
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
      test: /\.js(\?.*)?$/i
    })]
  },
  output: {
    filename: `${myAmazingFileName}.min.js`,
    path: path.resolve(__dirname, "dist")
  }
};

Upvotes: 1

Related Questions