@intouchg/tarot

Easy custom Webpack configs for SCSS and JS

Features

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

Usage

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()
})

2. Use webpack-cli and arguments to build:

webpack serve
webpack --mode development
webpack --analyze

Prior Art

• tarot