parent
1c329c91a4
commit
98027f11c1
@ -1,2 +1,27 @@
|
|||||||
# webpack
|
# 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' ],
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
```
|
||||||
|
const tinyComponentsWebpack = require('@tiny-components/webpack')
|
||||||
|
|
||||||
|
module.exports = tinyComponentsWebpack({
|
||||||
|
critical: [ './resources/js/critical.js' ],
|
||||||
|
styles: [ './resources/scss/styles.scss' ],
|
||||||
|
}, {
|
||||||
|
svg: {
|
||||||
|
src: [
|
||||||
|
'./resources/icons/*.svg'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
@ -0,0 +1,105 @@
|
|||||||
|
const webpack = require('webpack')
|
||||||
|
const TerserPlugin = require('terser-webpack-plugin')
|
||||||
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
||||||
|
const { PurgeCSSPlugin } = require('purgecss-webpack-plugin')
|
||||||
|
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts')
|
||||||
|
const SvgSpritemapPlugin = require('svg-spritemap-webpack-plugin')
|
||||||
|
const path = require('path')
|
||||||
|
const glob = require('glob')
|
||||||
|
|
||||||
|
const PATHS = {
|
||||||
|
src: path.join(__dirname, 'resources/js')
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = function tinyComponentsWebpack(files, options = {}) {
|
||||||
|
|
||||||
|
// merge options with defaults
|
||||||
|
const defaults = Object.assign({
|
||||||
|
destination: path.resolve(__dirname, 'public')
|
||||||
|
}, options)
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
entry: files,
|
||||||
|
output: {
|
||||||
|
path: defaults.destination,
|
||||||
|
filename: 'js/[name].js',
|
||||||
|
},
|
||||||
|
|
||||||
|
optimization: {
|
||||||
|
removeEmptyChunks: true,
|
||||||
|
minimize: true,
|
||||||
|
minimizer: [
|
||||||
|
new TerserPlugin({
|
||||||
|
terserOptions: {
|
||||||
|
output: {
|
||||||
|
comments: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
extractComments: false
|
||||||
|
})
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
module: {
|
||||||
|
rules: [{
|
||||||
|
test: /\.riot$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
use: [{
|
||||||
|
loader: '@riotjs/webpack-loader',
|
||||||
|
options: {
|
||||||
|
hot: false,
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.scss$/,
|
||||||
|
use: [
|
||||||
|
MiniCssExtractPlugin.loader,
|
||||||
|
'css-loader',
|
||||||
|
'sass-loader'
|
||||||
|
],
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: [
|
||||||
|
new RemoveEmptyScriptsPlugin(),
|
||||||
|
new MiniCssExtractPlugin({
|
||||||
|
filename: 'css/[name].css',
|
||||||
|
}),
|
||||||
|
new PurgeCSSPlugin({
|
||||||
|
paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true })
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
if (defaults.svg.src) {
|
||||||
|
config.plugins.push(new SvgSpritemapPlugin(defaults.svg.src, {
|
||||||
|
output: {
|
||||||
|
filename: 'symbol-defs.svg',
|
||||||
|
chunk: {
|
||||||
|
keep: true
|
||||||
|
},
|
||||||
|
svgo: {
|
||||||
|
plugins: [{
|
||||||
|
name: 'convertStyleToAttrs',
|
||||||
|
active: true
|
||||||
|
},{
|
||||||
|
name: 'removeStyleElement',
|
||||||
|
active: true
|
||||||
|
}, {
|
||||||
|
name: 'removeAttrs',
|
||||||
|
params: {
|
||||||
|
attrs: 'fill'
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
sprite: {
|
||||||
|
prefix: 'icon-'
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
return config
|
||||||
|
}
|
@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"name": "@tiny-components/webpack",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"description": "Webpack Wrapper",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git@gitea.node001.net:tiny-components/webpack.git"
|
||||||
|
},
|
||||||
|
"author": "Björn Hase",
|
||||||
|
"license": "MIT",
|
||||||
|
"devDependencies": {
|
||||||
|
"@riotjs/compiler": "^9.0.7",
|
||||||
|
"@riotjs/webpack-loader": "^9.0.1",
|
||||||
|
"css-loader": "^6.10.0",
|
||||||
|
"mini-css-extract-plugin": "^2.8.1",
|
||||||
|
"purgecss-webpack-plugin": "^5.0.0",
|
||||||
|
"sass": "^1.71.1",
|
||||||
|
"sass-loader": "^14.1.1",
|
||||||
|
"svg-spritemap-webpack-plugin": "^4.5.0",
|
||||||
|
"webpack": "^5.90.3",
|
||||||
|
"webpack-cli": "^5.1.4",
|
||||||
|
"webpack-remove-empty-scripts": "^1.0.4"
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in new issue