Create an entry-file in your Webpack build to consolidate entry-point exports
npm install entry-file-pluginCreate 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! ❤️
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.
sh
npm i -D entry-file-plugin
`🚦 Quick setup
In
webpack.config.js:`diff
+ const EntryFilePlugin = require('entry-file-plugin') module.exports = {
...,
plugins: [
...,
+ new EntryFilePlugin({
+ imports: [...],
+ exports: [...]
+ })
]
}
`$3
The following configuration:
`js
new EntryFilePlugin({
imports: [
'./styles.css',
],
exports: [
'./components.js',
],
})
`Creates an
index.js file:
`js
import "./styles.css";
export * from "./components.js";
`⚙️ Options
$3
Type: stringDefault:
index.jsThe entry file name.
$3
Type: string[]
An array of paths to import from.
$3
Type:`ts
type Specifier = (string | {
name: string;
as?: string;
})[];type Exports = (string | {
from: string;
specifiers?: Specifier[];
})[];
`An array of paths and names to export from.
$3
Type: booleanDefault:
falseWhether to omit import/export statements for relative paths that could not be resolved. If
false`, a warning will be emitted for unresolvable import/exports.- rollup-plugin-aggregate-exports - Similar plugin for Rollup