如何根据入口文件的名称命名 Webpack 输出文件？答案

【问题标题】：How to name Webpack output file based on name of entry file?如何根据入口文件的名称命名 Webpack 输出文件？
【发布时间】：2022-02-04 05:24:39
【问题描述】：

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

这是我的 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")
    }
};

【问题讨论】：

标签： javascript npm webpack minify bundling-and-minification

【解决方案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")
  }
};

【讨论】：