如何使用 Webpack CLI 指定输出文件名？答案

【问题标题】：How to specify an output filename with the Webpack CLI?如何使用 Webpack CLI 指定输出文件名？
【发布时间】：2020-12-17 18:36:10
【问题描述】：

我想在我的build 文件夹中创建一个名为background.js 的文件。这是我使用的命令：

webpack --mode production ./src/background -o ./build/background.js

但这会在我的构建文件夹中创建一个名为background.js 的文件夹。我在webpack-cli documentation 上没有找到任何其他标志。那么如何使用 Webpack CLI 指定输出文件名呢？

【问题讨论】：

标签： javascript webpack build command-line-interface

【解决方案1】：

你可以试试--output-filename: https://v4.webpack.js.org/api/cli/#output-options

webpack --mode production --entry src/background/index.js --output-filename background.js -o ./build

根据文档，以下是 v4 中受 v5 支持的核心标志列表： https://github.com/webpack/webpack-cli/tree/next/packages/webpack-cli#webpack-5

【讨论】：

我使用"webpack-cli": "^4.2.0"，但是当我使用--output-filename时收到Unknown argument: --output-filename error 消息

【解决方案2】：

在 webpack.config.js 文件夹的顶部添加这个，

const path = require("path");

那么您的模块导出将是：

module.exports = {
module: {
    rules: [ 
        // your rules, eg, babel loder.
    ],
},
    // the main solution
entry: "./src/index.js", // your entry file that you want it to be bundled for production
output: { // the output file path,
    path: path.resolve(__dirname, "build"),// build is your folder name.
    filename: "background.js", // your specific filename to be built in the build folder.
}, };

最后你的 package.json 构建脚本 将是

"build": "webpack --mode production",

【讨论】：