如何在 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 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?

Answer 1

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

看到这个问题：

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

Answer 2

因此，默认情况下，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'

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

How to create output filename with given name in webpack?

javascript

webpack

es6-modules