webpack-watched-glob-entries-plugin

Webpack-watched-glob-entries-plugin

Provides a way to glob for entry files in Webpack watch and non-watch modes.

Install

Install through yarn or npm =>

yarn add -D webpack-watched-glob-entries-plugin

or

npm install --save-dev webpack-watched-glob-entries-plugin

Usage

// Get the plugin
const WebpackWatchedGlobEntries = require('webpack-watched-glob-entries-plugin');
 
// In your Webpack config:
{
    ... // At your entry definition
    
    entry: WebpackWatchedGlobEntries.getEntries(
      [ 
        // Your path(s) 
        path.resolve(__dirname, 'entry/**/*.js'),
        path.resolve(__dirname, 'more/entries/**/*.js')
      ],
      {
          // Optional glob options that are passed to glob.sync()
          ignore: '**/*.test.js'
      }
    )
    
    ... // At the plugin definition
    
    plugins: [
        new WebpackWatchedGlobEntries(),
    ],
    
    ...
}

Why?

I wanted to use Webpack for my projects but was missing a way to add new entries without touching the config.

Example

If you have the following source structure:

- entries
    - main.js
    - Some
        - stuff.js
    - Other
        - things.js 

The entries will look like:

{
    "main":         "/abs/path/to/main.js",
    "Some/stuff":   "/abs/path/to/Some/stuff.js",
    "Other/things": "/abs/path/to/Other/things.js"
}

Now add [name] in your output.filename and the entry file directory structure will be reflected in the output directory.