You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
2.0 KiB
119 lines
2.0 KiB
# 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 ]
|
|
})
|
|
```
|