Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sanjsanj/webpack-entry-plus
Generate dynamic webpack bundle output names from known or unknown entry files
https://github.com/sanjsanj/webpack-entry-plus
dynamic entry output plugin webpack webpack3
Last synced: 27 days ago
JSON representation
Generate dynamic webpack bundle output names from known or unknown entry files
- Host: GitHub
- URL: https://github.com/sanjsanj/webpack-entry-plus
- Owner: sanjsanj
- License: mit
- Created: 2017-11-11T14:14:22.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-06-14T06:50:26.000Z (5 months ago)
- Last Synced: 2024-09-28T22:08:11.906Z (about 1 month ago)
- Topics: dynamic, entry, output, plugin, webpack, webpack3
- Language: JavaScript
- Homepage:
- Size: 1.95 MB
- Stars: 24
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# webpack-entry-plus
Generate dynamic webpack bundle output names from wildcarded entry files.
[](https://nodei.co/npm/webpack-entry-plus/)
[](https://github.com/sanjsanj/webpack-entry-plus/blob/master/src/entry-plus.js)
[](https://travis-ci.org/sanjsanj/webpack-entry-plus) [](https://codecov.io/gh/sanjsanj/webpack-entry-plus)
## Why?
This package solves the problem of not knowing (or wanting to hardcode) all of our output bundles' names. Particularly useful if you're building a CMS-based architecture or multi-page app. [Read more about it here](https://medium.com/@sanjsanj/webpack-creating-dynamically-named-outputs-for-wildcarded-entry-files-9241f596b065).
## Install
Install with npm:
```
npm install --save-dev webpack-entry-plus
```
## API
Must be passed an argument which is an `[ Array of { Objects } ]` that comply to this schema:
```
[
{
entryFiles: Array of String(s),
outputName: String, or Function that returns a String,
},
]
```
If we want to use wildcard matchers to include unknown files, use the included `glob` package like so:
```
// import glob
const glob = require('glob');
[
{
entryFiles: glob.sync('./Folder1/*.js'),
outputName: String or Function that returns String,
},
]
```
If we want to create a dynamic output name, pass a function in to `outputName` that takes one argument and returns the `[name]` we want to use. The argument, `(item)` in this example, is the filepath for the file being processed:
```
[
{
entryFiles: Array of String(s),
outputName(item) {
return item.replace('unwanted text', 'text');
// or any other string transform we want
// must return a string which will become the [name] in our output
},
},
]
```
- If we pass a String in to `outputName` it will bundle all the `entryFiles` in to one.
- If we pass a Function in to `outputName` it will process each entry file in to it's own bundle, using the returned value of `outputName(entryFile[singular])` as the `[name]` in webpack's output object.
## Example Usage
```
// webpack.config.js
// First `import` or `require` this package, and glob for wildcard matching, e.g:
const entryPlus = require('webpack-entry-plus');
const glob = require('glob');
// Then create an Array of Objects containing our entry files:
const entryFiles = [
{
entryFiles: ['file1.js'],
outputName: 'bundle1',
},
{
entryFiles: ['file2.js', 'file3.js'],
outputName: 'bundle2',
},
{
entryFiles: ['react', 'react-dom'], // node modules work too
outputName: 'react',
},
{
entryFiles: glob.sync('./core/*.js'),
outputName: 'core',
},
{
entryFiles: glob.sync('./Folder1/**/*-entry.js'),
outputName(item) {
return item.replace('Folder1/', '../');
},
},
];
Then pass the function in to the `entry` point of our config:
module.exports = {
entry: entryPlus(entryFiles),
output: {
filename: '[name].js',
},
...
}
```