webpack/README.md

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 ]
})