如何在 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 发出块名称为“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