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

【问题标题】：How to create output filename with given name in webpack?如何在 webpack 中创建具有给定名称的输出文件名？
【发布时间】：2020-07-25 14:32:16
【问题描述】：

我有使用 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 production

Hash: 98ccf0949bfdf066246a
Version: webpack 4.44.0
Time: 97ms
Built at: 25.07.2020 16:30:31
  Asset      Size  Chunks             Chunk Names
main.js  2.23 KiB       0  [emitted]  main
Entrypoint 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？

【问题讨论】：

你使用的是哪个版本的 webpack？我知道loaders 不再存在，而是由rules 代替。老实说，我在您的配置中没有看到任何奇怪的地方。
@tmhao2005 配置错误，但根本没有加载也没关系。

标签： javascript webpack es6-modules

【解决方案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'

【讨论】：

文件名有效，配置未加载。你不需要chunkFilename

【解决方案2】：

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

看到这个问题：

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

【讨论】：