# Webpack

Small Wrapper Function for using Webpack. These Function is only Build to using, 

```
const tinyComponentsWebpack = require('@tiny-components/webpack')

module.exports = tinyComponentsWebpack({
    critical: [ './resources/js/index.js' ],
    styles: [ './resources/scss/styles.scss' ],
})
```

## Options

### destination

```
module.exports = tinyComponentsWebpack({
    <files>
}, {
    destination: path.resolve(process.cwd(), '../../')
})
```

### svg 

Path to svgs to bundle them with "svg-spritemap-webpack-plugin" to get a
single file,

```
module.exports = tinyComponentsWebpack({
    <files>
}, {
    svg: {
        src: [ 
            './resources/icons/*.svg'
        ]
    }
})
```

### context

Working Directory for Webpack,

```
module.exports = tinyComponentsWebpack({
    <files>
}, {
    context: path.resolve(process.cwd(), '../')
})
```

### publicPath

Name of the Public Path, default is set to '/',

```
module.exports = tinyComponentsWebpack({
    <files>
}, {
    publicPath: '/public/'
})
```

### purge:src

Directory for find css-classes in files, 

```
module.exports = tinyComponentsWebpack({
    <files>
}, {
    purge: {
        src: path.join(__dirname, 'resources/js')
    }
})
```

### purge:src

Lists of Regex to ignore css-classes, 

```
module.exports = tinyComponentsWebpack({
    <files>
}, {
    purge: {
        safelist: {
            deep: [ /tiny-datepicker/, /toast/ ]
        }
    }
})
```

## Plugin: Riot.js

For using Riot.js, install compiler and webpack-loader 

```
npm install @riotjs/compiler @riotjs/webpack-loader --save-dev
bun add @riotjs/compiler @riotjs/webpack-loader --dev
``` 

And adding a rule for Riot.js, 

```
const tinyComponentsWebpack = require('@tiny-components/webpack')
const riotPlugin = require('@tiny-components/webpack/rules/riot')

module.exports = tinyComponentsWebpack({
    critical: [ './resources/js/critical.js' ], 
    styles: [ './resources/scss/styles.scss' ],
}, {
    rules: [ riotRules ]
})
```