如何在 webpack 中创建具有给定名称的输出文件名？

Question

我有使用 ES 模块的库，我想在 ES5 中生成 UMD 文件。我有这样的配置：var path = require('path');var webpack = require('webpack');module.exports = {    entry: {        index: path.resolve('./src/index.js')    },    output: {        library: 'name',        libraryTarget: 'umd',        path: path.resolve(__dirname, 'dist'),        filename: 'umd.min.js'    },    module: {        loaders: [            {                test: /\.js$/,                loader: 'babel-loader',                exclude: /node_modules/,                query: {                    presets: ['env']                }            }        ]    },    stats: {        colors: true    },    mode: 'production',    devtool: 'source-map'};和 webpack 创建文件main.js我怎样才能制作输出文件umd.min.js？> webpack --mode productionHash: 98ccf0949bfdf066246aVersion: webpack 4.44.0Time: 97msBuilt at: 25.07.2020 16:30:31  Asset      Size  Chunks             Chunk Namesmain.js  2.23 KiB       0  [emitted]  mainEntrypoint main = main.js[0] ./src/index.js + 3 modules 3.6 KiB {0} [built]    | ./src/index.js 294 bytes [built]    | ./src/Canvas.js 1.88 KiB [built]    | ./src/Item.js 1.2 KiB [built]    | ./src/constants.js 239 bytes [built]我的 package.json 看起来像这样：  "type": "module",  "main": "./src/index.js",  "unpkg": "./dist/umd.min.js",所以这是一个错误？为什么文件名为main.js？

Answer 1

所以，默认情况下 webpack 发出块名称为“main.js”，所以如果你想重命名块名称，请在你的 webpack 配置文件的输出对象中使用“chunkFilename”选项，这是我如何做的例子那：

output: {

filename: env === 'development' ? '[name].js' : '[name].[hash].js',

path: path.resolve(__dirname, '../dist'),

chunkFilename: 'scripts/[name].[hash].js',},

在你的情况下你应该这样做：

chunkFilename: 'umd.min.js'

Answer 2

问题是 webpack-cli 建议将文件重命名为 cjs 但不要说它默认不加载，您需要在运行 webpack 时显式添加 --config 和文件名。

看到这个问题：

https://github.com/webpack/webpack-cli/issues/1165