Modern-web-dev-utils NPM

modern-web-dev-utils

Utility functions for create-modern-web-dev

getPageNamesIn(directory) - Get all HTML file names in a given directory

getPageNamesIn('./pages'); // [('index', 'with-script', 'without-script')];

getScriptFoldersIn(directory) - Get all script folders (should have main.js file inside) in a given directory
```
getScriptFoldersIn('./scripts'); //['index', 'with-scrpit'];
```

createPageTemplates(pageNames, scriptFolders) - Create page templates for each pages with or without script

createPageTemplates(
  getPageNamesIn('./pages'),
  getScriptFoldersIn('./scripts')
);

// if the page has corresponding script (with chunk)
{
  name: 'with-chunk.html',
  chunk: 'with-chunk',
}

// if the page has no corresponding script (without chunk)
{
  name: 'without-chunk.html',
}

htmlWebpackPluginTemplates(pageTemplates) - Generate HTML files (with HtmlWebpackPlugin) for each page template

htmlWebpackPluginTemplates(
  createPageTemplates(
    getPageNamesIn('./pages'),
    getScriptFoldersIn('./scripts'),
  ),
);

// Array of HtmlWebpackPlugin instance
[
  new HtmlWebpackPlugin({
    filename: 'with-chunk.html',
    template: `./pages/with-chunk.html`,
    chunks: ['with-chunk'],
  }),
  new HtmlWebpackPlugin({
    filename: 'without-chunk.html',
    template: `./pages/without-chunk.html`,
  }),
];

getPageTemplatesWithChunk(pagesDirectory, scriptDirectory) - Return all page templates with chunks

getPageTemplatesWithChunk('./pages', './scripts');

// Array of page templates with chunk
[
  {
    name: 'index.html',
    chunk: 'index',
  },
  {
    name: 'with-chunk.html',
    chunk: 'with-chunk',
  },
];

getPageTemplatesChunkEntryPoints(pageTemplatesWithChunk, scriptDirectory) - Return the webpack entry points for page templates with chunk

getPageTemplatesChunkEntryPoints(
  getPageTemplatesWithChunk('./pages', './scripts'),
  './scripts',
);

// Entry points to pages with chunks
{
  index: './scripts/index/main.js',
  'with-chunk': './scripts/with-chunk/main.js',
};

How I worked on this project

My goal was to create a utility function for (multi-pages web app) webpack configuration

I used TypeScript to create robust and easy to use functions: See functions
I used Jest to ensure all functions are working as expected: Screenshot of test result