zip-webpack-plugin icon indicating copy to clipboard operation
zip-webpack-plugin copied to clipboard

Doesn't allow multiple entry points output [name]

Open willfarrell opened this issue 7 years ago • 5 comments

v1: https://webpack.github.io/docs/multiple-entry-points.html v2: https://webpack.js.org/concepts/output/#multiple-entry-points

Example:

const path = require('path');
const ZipPlugin = require('zip-webpack-plugin');

module.exports = {
    entry: {
        'schedule': './src/schedule.js',
        'import-export': './src/import-export.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new ZipPlugin({
            filename:'[name].zip'
        })
    ]
};

willfarrell avatar Nov 17 '17 20:11 willfarrell

I'm not sure exactly what your issue is, but I assume that you want files emitted by each entry point to be in separate zip files.

This isn't done partly because (as far as I can tell) Webpack does not provide a straightforward way to detect which files were emitted by each entry point.

e.g. if x.js and y.js are entry points...

x.js

import 'file-loader!./x.png';

y.js

import 'file-loader!./y.png';

...then x.png and y.png just show up in the list of assets without anything (that I can find) that maps them to the chunk/entrypoint that loaded them.

erikdesjardins avatar Nov 17 '17 21:11 erikdesjardins

That is one use case I didn't think of, knowing which additional static assets are required would be tricky to know.

What I was imagining was for bundling aws lambda function. I imagined the zip plugin would zip the output result of each entry using the multi entrypoint [name] syntax.

Using my example above would result in ./dist/import-export.zip and ./dist/schedule.zip

willfarrell avatar Nov 17 '17 23:11 willfarrell

Another use case for for path substitution independent of the multiple entry points problem would be for plugins that provide details in the substitutions. Consider the git-revision-webpack-plugin which provides [git-revision-version]. This would be useful in a case like below, which currently takes the string literally.

const ZipPlugin = require('zip-webpack-plugin');
var GitRevisionPlugin = require('git-revision-webpack-plugin')

module.exports = {
  // ...
  plugins: [
    // ..
    new GitRevisionPlugin(),
    new ZipPlugin({
      filename: 'myapplication-[git-revision-version].zip',
    })
  ]
};

robpc avatar Jan 31 '18 17:01 robpc

Ran into the same problem. Just loop through the entries yourself as a workaround. Hope this helps others:

const configBase = {
    entry: {
        one: './src/one.js',
        two: './src/two.js',
    },
    output: {
        filename: '[name]/bundle.js',
        path: path.resolve(__dirname, 'dist/')
    }
};

const configPlugins = {
    plugins: Object.keys(configBase.entry).map((entryName) => {
        return new ZipPlugin({
            path: path.resolve(__dirname, 'dist/'),
            filename: entryName,
            extension: 'zip'
        })
    })
};

const someConfigName = Object.assign(configBase, configPlugins);

module.exports = someConfigName;

jvandenaardweg avatar Dec 13 '18 08:12 jvandenaardweg

To add on to the previous response you might want to use something like this:

const configPlugins = {
    plugins: Object.keys(configBase.entry).map((entryName) => {
        return new ZipPlugin({
            path: path.resolve(__dirname, 'dist/'),
            include: [`${entryName}.js`],
            filename: entryName,
        })
    })
};

Which just zips each individual file

slack2450 avatar Jan 30 '23 19:01 slack2450