ack-webpack

A code bundler that drastically reduces setup time by offering an init prompt of project setup questions and includes a fantastic browser reloader.

3 Step Process

• install
• init
• build or watch your code

Table of Contents

• Overview
• Step One Installation
  • Optional Global Install
• Step Two Initialization
• Step Three Commands
  • Command Options
  • Time Saver Scripts

Overview

This package intends to greatly reduce common project setup times when using webpack to bundle javascript code.

Step One Installation

Install ack-webpack into your project

npm install ack-webpack --save-dev

postinstall, one entry will be added into your package.json scripts of "ack-webpack":"ack-webpack" to allow short-hand cli commands

Step Two Initialization

ack-webpack does not operate standing alone, it requires your instructions.

npm run ack-webpack -- init

The above command works because during postinstall of ack-webpack, a script entry was added to your package.json

Optional Global Install

It's possible to make your commands even shorter by installing ack-webpack globally

npm install -g ack-webpack

If you did install ack-webpack globally, your init now looks as follows

ack-webpack init

Step Three Commands

Build Example

npm run ack-webpack -- app/index.js www/app.js --production

Build Example 2. Same Above Example, using Global Installation

ack-webpack app/index.js www/app.js --production

Build, Watch Code, and Reload Browser Example

ack-webpack app/index.js www/app.js --watch --browser=www/

Browser Test Example

ack-webpack reload www

Build. After Build, Show in Browser Example

ack-webpack app/index.js www/app.js --production --browser

Command Options

• skip-source-maps Boolean - javascript minify pointers in .map file (adds compile time)
• production Boolean = false - output files will be minified with NO source-maps
• minify Boolean = false - output files will be compressed
• watch Boolean = false - files are built and kept in memory and recompiled on any change
• browser String - opens browser on computer. Add = sign and path to server if not same path as build file
• port Number = 3000 - What port to run reload browser

Time Saver Scripts

Add these recommended entries into your package.json scripts to save yourself sometime

package.json convenience scripts

{
  "scripts":{
    "start": "ack-webpack reload src-path",
    "build": "ack-webpack src-path/index.js www/index.js --production",
    "watch": "ack-webpack src-path/index.js www/index.js --watch --browser=www/"
  }
}

Now you can simply just run the following commands

npm run build

npm run watch