0.7.0-beta2 • Public • Published


    npm version JavaScript Style Guide

    A highly shareable and customizable webpack config.


    • Dynamic Imports (Code Splitting)
    • ES2017+
    • JSX
    • Linting via @pixel2html/eslint-config
    • Parsing all js (ours and vendor, vendor is cached though)
    • Sourcemaps for debugging
    • Tree-Shaking
    • Extend and customize the underlying config

    Getting Started FAST!

    npm install --dev @afuggini/scripts-frontend
    npx scripts-frontend development


    We have a set of opinions towards how the files should look like for it to be a zero-config situation.

    # Your project root
    ├── dist
    │   └── assets
    │       └── js
    │           └── main.js # Compiled file
    └── src
        └── assets
            └── js
                └── index.js # Your starting point

    That is to be compliant with the defaults we were using on our generator-frontend package, however this is easy to customize.

    Frontend Generator

    If you're using our Frontend Generator or our Shopify Generator then you don't have to to anything since they already use this package. But if you're coming from scratch this is what you need to do:


    Create an index.js with the following:

    const { compiler } = require('@afuggini/scripts-frontend')
    // Options are development, production or debug
    const mode = 'development'
    console.log(`Compiling in ${mode} mode...`)
      .then(() => console.log(`All done!!`))
      .catch(e => console.log(e))

    You can now run node index to get your JS compiled.


    const gulp = require('gulp')
    const { compiler } = require('@afuggini/scripts-frontend')
    gulp.task('start', () => compiler('development'))
    gulp.task('build', () => compiler('production'))
    gulp.task('default', gulp.series('start'))

    Customizing the underlying config

    To customize your setup you need to create a scripts.config.js file at the root of your project that file will be a function that takes 2 parameters:

    • config (the default config) See Webpack Config
    • webpack (a webpack instance so you can use plugins and whatever)


    module.exports = function(config, webpack) {
      // tweak away esketit
      // Always return the config
      return config


    Since we do quite a bit of Shopify ourselves we added some opinionated list of shopify plugins which you can access like this:


    const { getShopifyPlugins } = require('@pixel2html/scripts-generator')
    module.exports = (config, webpack) => {
      config.plugins = getShopifyPlugins()
      // So the sourcemaps work on Shopify
      config.output.filename = '[name].js.liquid'
      return config

    Shopify Generator

    We also supplied a fully opinionated Shopify config which you can setup like this:


    const { createShopifyConfig } = require('@afuggini/scripts-frontend')
    module.exports = config => createShopifyConfig(config)


    This is compliant with the way our Shopify Generator works meaning your starting point is:


    and the bundle outputs to:


    While splitting vendor code from node_modules to:


    The liquid extension is used for sourcemaps support via Shopify Cache busting situation for assets.

    Check the examples folder for some reasonable examples.

    PRs Welcome!

    Open an issue so we can discuss about it, then file a PR. 😍




    npm i @afuggini/scripts-frontend

    DownloadsWeekly Downloads






    Unpacked Size

    23.1 kB

    Total Files


    Last publish


    • afuggini