如何根据入口文件的名称命名 Webpack output 文件？

Question

我正在尝试根据入口文件的名称动态命名 Webpack 输出的文件。 例如，我的条目名为 accessCodeEditor.js - 我希望将 output 文件命名为 accessCodeEditor.min.js。 我认为output.filename: "[name].min.js"会根据这些文档来解决问题，但它却将其命名为main.min.js ： https://webpack.js.org/configuration/output/#输出文件名

这是我的 webpack.config.js 文件：

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

Answer 1

但是，当通过多个入口点、代码拆分或各种插件创建多个包时，您应该使用以下替换之一为每个包赋予唯一的名称...

嗨，这个[name].min.js用于上述的另一个目的。

---

你试过下面的方法吗？

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