entry-file-plugin

Create an ESM entry-file in your Webpack build to consolidate entry-point exports

_{Support this project by ⭐️ starring and sharing it. Follow me to see what other cool projects I'm working on! ❤️}

🙋‍♂️ Why?

For consolidating exports from Webpack builds that emit multiple entry-points.

A great use-case for this is Vue.js component builds that extract the CSS into a separate file. Even if the build bundles multiple components, by creating an entry-point that imports the CSS and re-exports the components, consuming applications can simply import from one path to get the appropriate styles.

🚀 Install

npm i -D entry-file-plugin

🚦 Quick setup

In webpack.config.js:

+ const EntryFilePlugin = require('entry-file-plugin')

  module.exports = {
    ...,

    plugins: [
      ...,
+     new EntryFilePlugin({
+       imports: [...], 
+       exports: [...]
+     })
    ]
  }

Example

The following configuration:

new EntryFilePlugin({
  imports: [
    './styles.css',
  ],
  exports: [
    './components.js',
  ],
})

Creates an index.js file:

import "./styles.css";
export * from "./components.js";

⚙️ Options

filename

Type: string

Default: index.js

The entry file name.

imports

Type: string[]

An array of paths to import from.

exports

Type:

type Specifier = (string | {
  name: string;
  as?: string;
})[];

type Exports = (string | {
  from: string;
  specifiers?: Specifier[];
})[];

An array of paths and names to export from.

omitSourcesNotFound

Type: boolean

Default: false

Whether to omit import/export statements for relative paths that could not be resolved. If false, a warning will be emitted for unresolvable import/exports.

👨‍👩‍👧 Related

• rollup-plugin-aggregate-exports - Similar plugin for Rollup