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")
}
};
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")
}
};