Custom JavaScript Build

JavaScript is built using Webpack. The default configuration is basic, so if you'd like to use other tools then you will need to setup the Webpack configuration in the webpack.config.js file. Getting configured can take a fair amount of work, but you are given all the power to choose how you'd like to setup your development process.

The built JavaScript file generated by Webpack will become available in your templates by the output filename specified in the config file. For example:

// webpack.config.js
module.exports = {
  entry: "./scripts/index.js",
  output: {
    filename: "main.js"
  }
}

// layout.html
{{ "main.js" | file | script }}

Example Webpack Config

Here's an example webpack.config.js file that uses Babel to compile ES6 JavaScript, Sass for writing styles, minification of JS and CSS, autoprefixer for CSS, and loading fonts/assets into styles:

// webpack.config.js
const path = require("path");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const isDev = process.env.NODE_ENV === "development";

const extractSass = new ExtractTextPlugin({
  filename: "[name].css",
  disable: isDev
});

const plugins = [ extractSass ];

if (!isDev) {
  plugins.push(new UglifyJsPlugin({ sourceMap: true }));
}

module.exports = {
  entry: "./scripts/index.js",
  output: {
    filename: "main.js",
    path: path.join(__dirname, "dist")
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: [{
        loader: 'babel-loader',
        options: {
          plugins: ["transform-class-properties"],
          presets: [
            ["env", {
              targets: { uglify: true }
            }]
          ]
        }
      }]
    },{
      test: /\.scss$/,
      use: extractSass.extract({
        use: [{
          loader: "css-loader",
          options: {
            sourceMap: true,
            url: false
          }
        }, {
          loader: "postcss-loader",
          options: {
            ident: "postcss",
            sourceMap: true,
            plugins: [
              require("autoprefixer")({
                browsers: ["ie >= 8", "> 1%"]
              }),
              require("postcss-clean")()
            ]
          }
        }, {
          loader: "sass-loader",
          options: {
            sourceMap: true
          }
        }],
        fallback: "style-loader"
      })
    },
    {
      test: /\.(png|jpg|gif|woff2?|ttf|eot|svg)$/,
      use: [
        {
          loader: 'file-loader',
          options: {}
        }
      ]
    }]
  },
  devtool: isDev ? "cheap-eval-source-map" : "source-map",
  plugins: plugins
};

Note: In this example Sass is used to write styles. For this to work, be sure to import your main.scss file into your index.js file.

// index.js
import "../styles/main.scss"

Theme Tool CLI

Published with Pagedip • Last updated January 30th 2018