Easy custom Webpack configs for SCSS and JS

Usage no npm install needed!

<script type="module">
  import intouchgTarot from 'https://cdn.skypack.dev/@intouchg/tarot';



Easy custom Webpack configs for SCSS and JS


  • babel-loader
  • webpack-bundle-analyzer
  • CSS / SCSS entry files
  • SCSS with PostCSS autoprefixer and media query sorting
  • SCSS $env variable based on Webpack mode


  1. Set up your webpack.config.js using tarot:
// webpack.config.js
const { build } = require('@intouchg/tarot')

module.exports = build({
    // Entry keys are used as the filename of the bundled output,
    // with appropriate file extension automatically added, and
    // are relative to the output directory.
    // Entry values are used as the filepath of the entry file,
    // and are relative to the source directory.
    entries: {
        bundle: 'index.js',
        styles: 'index.scss',
        ['js/bundle-' + new Date().toISOString()]: 'index.js',

    // Options
    source: 'src2', // Source directory, default 'src'
    output: 'dist2', // Output directory, default 'dist'
    https: true, // Enable HTTPS, default false
    cors: true, // Enable CORS, default false
    copy: [ // Copy static assets, default []
            from: 'assets', // Relative to the source directory
            to: 'other' // Relative to the output directory

    // Note: Webpack `context` is assumed to be process.cwd()
  1. Use webpack-cli and arguments to build:
webpack serve
webpack --mode development
webpack --analyze

Prior Art