open-index/open-npm huggingface dataset:
npm package: @neogeek/create-custom-webpack-app
Description: A no-frill webpack cli that requires next to nothing to get started with.
Latest version: 1.11.0

# @neogeek/create-custom-webpack-app

> 🎒 A no-frill webpack cli that requires next to nothing to get started.

[![NPM Version](http://img.shields.io/npm/v/@neogeek/create-custom-webpack-app.svg?style=flat)](https://www.npmjs.org/package/@neogeek/create-custom-webpack-app)

## Install

```bash
$ npm install @neogeek/create-custom-webpack-app -g
```

## Usage

```bash
$ create-custom-webpack-app <directory>
```

or via [NPX](https://www.npmjs.com/package/npx)

```bash
$ npx @neogeek/create-custom-webpack-app <directory>
```
npm package: @neogeek/custom-webpack-cli
Description: A no-frill webpack cli that requires next to nothing to get started with.
Latest version: 3.1.0

# @neogeek/custom-webpack-cli

> 🎒 A no-frill webpack cli that requires next to nothing to get started.

[![NPM Version](http://img.shields.io/npm/v/@neogeek/custom-webpack-cli.svg?style=flat)](https://www.npmjs.org/package/@neogeek/custom-webpack-cli)

## Features

- React 18
- TypeScript 5
- Styled Components
- Sass

## Install

```bash
$ npm install @neogeek/custom-webpack-cli --save-dev
```

## Usage

**package.json**

```json
{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "styled-components": "^6.1.1"
  },
  "devDependencies": {
    "@neogeek/custom-webpack-cli": "^3.0.0"
  },
  "scripts": {
    "start": "custom-webpack-dev-server-cli",
    "build": "custom-webpack-cli"
  },
  "private": true
}
```

**src/index.jsx**

```javascript
const HelloMessage = ({ name }) => <div>Hello {name}</div>;

import { createRoot } from 'react-dom/client';

const root = createRoot(document.querySelector('body'));

root.render(<HelloMessage name="Taylor" />);
```

## Static Files

All static files (images, audio, video files) should be placed in a folder names `public/` at the root of the project.

## Customization

To customize the webpack config, add a `webpack.custom.js` to the root of your project. The contents of that file will be merged with the [webpack.config.js](webpack.config.js) file distributed with this tool.

### Transpile Custom `node_module` Packages

```javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        exclude: /node_modules\/(?!custom-component-library)/u,
        include: /.*/
      },
      {
        test: /\.tsx?$/u,
        exclude: /node_modules\/(?!custom-component-library)/u,
        include: /.*/
      },
      {
        test: /\.jsx?$/u,
        exclude: /node_modules\/(?!custom-component-library)/u,
        include: /.*/
      }
    ]
  }
};
```

### Open Page on Launch

```javascript
module.exports = {
  devServer: {
    open: true,
    openPage: 'blog/'
  }
};
```

### Compile as a CommonJS Module (without including React & ReactDOM)

```javascript
const { resolve } = require('path');

module.exports = {
  externals: {
    react: 'react',
    reactDOM: 'react-dom'
  },
  output: {
    filename: 'bundle.min.js',
    path: resolve(process.cwd(), 'dist'),
    publicPath: '/',
    library: {
      type: 'commonjs2'
    }
  }
};
```
npm package: @neogeek/videoplayer.js
Description: Display video in the browser with variable input sources.
Latest version: 1.1.0

# @neogeek/videoplayer.js

> 🎥 Display video in the browser with variable input sources.

[![NPM Version](http://img.shields.io/npm/v/@neogeek/videoplayer.js.svg?style=flat)](https://www.npmjs.org/package/@neogeek/videoplayer.js)

## Install

```bash
$ npm install @neogeek/videoplayer.js
```

## Usage

```html
<script
    type="module"
    src="https://unpkg.com/@neogeek/videoplayer.js@1.0.0/index.js"
></script>
<script type="module">
    import { setupVideoPlayer } from 'https://unpkg.com/@neogeek/videoplayer.js@1.0.0/index.js';

    setupVideoPlayer(document.querySelector('video'), {
        videoInputDeviceSelect: document.querySelector('#videoinput'),
        audioInputDeviceSelect: document.querySelector('#audioinput')
    });
</script>
```