diff --git a/README.md b/README.md index 4f644b5..8282541 100644 --- a/README.md +++ b/README.md @@ -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' + ] + } +}) +``` diff --git a/index.js b/index.js new file mode 100644 index 0000000..539f115 --- /dev/null +++ b/index.js @@ -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 +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..1d91ddd --- /dev/null +++ b/package.json @@ -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" + } +}