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