javascript - How to create output filename with given name in webpack? - Stack Overflow

admin管理员组

文章数量:1293068

I have library that use ES modules and I want to generate UMD file in ES5. I have config like this:

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'
};

and webpack create file main.js how can I make output file 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]

My package.json look like this:

  "type": "module",
  "main": "./src/index.js",
  "unpkg": "./dist/umd.min.js",

So this a bug? Why the file name is main.js?

I have library that use ES modules and I want to generate UMD file in ES5. I have config like this:

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'
};

and webpack create file main.js how can I make output file 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]

My package.json look like this:

  "type": "module",
  "main": "./src/index.js",
  "unpkg": "./dist/umd.min.js",

So this a bug? Why the file name is main.js?

• javascript
• webpack
• es6-modules

Share Improve this question Follow asked Jul 25, 2020 at 14:32 jcubicjcubic 66.7k5858 gold badges249249 silver badges453453 bronze badges 2

• Which version of webpack are you using? I'm aware of loaders is no longer existed to be replaced by rules instead. To be honest I don't see anything weird in your configuration though. – tmhao2005 Commented Jul 25, 2020 at 17:35
• @tmhao2005 the config was wrong, but it didn't matter it was not loaded at all. – jcubic Commented Jul 25, 2020 at 18:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

So, by default the webpack emits the chunk name as "main.js", so if you want to rename the chunk name, use the "chunkFilename" option in the output object of your webpack config file, here is the example how i did that:

output: {
filename: env === 'development' ? '[name].js' : '[name].[hash].js',
path: path.resolve(__dirname, '../dist'),
chunkFilename: 'scripts/[name].[hash].js',},

in your case you should do:

chunkFilename: 'umd.min.js'

The problem is that webpack-cli suggest to rename the file to cjs but don't say that it's not loaded by default, you need to explicitly add --config with the filename when running webpack.

See this issue:

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

本文标签： javascriptHow to create output filename with given name in webpackStack Overflow