webpack-entry-plus
Generate dynamic webpack bundle output names from wildcarded entry files.
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.
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
outputNameit will bundle all theentryFilesin to one. -
If we pass a Function in to
outputNameit will process each entry file in to it's own bundle, using the returned value ofoutputName(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',
},
...
}