Home
/
Packages
/
ack-webpack

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.

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.

NOTE: This package does not depend on webpack and is completely useful without ever installing webpack

Boot a project in 4 easy steps

  • install
  • init
  • choose dependencies
  • build/watch code

Table of Contents

Overview

This package greatly reduces common project setup times for the task of bundling javascript code.

  • Includes ability to code watch without the use of webpack nor webpack-dev-server
    • ack-webpack reloader does not include hot swap reloading, install webpack-dev-server for that boost
  • Includes sophisticated CLI init commands to help get a project going
    • Somewhat experimental and needs refinements for more complicated tasks
  • Includes sophisticated CLI install commands to help included jsDependencies that are seperate from devDependencies

4 STEPS TO BOOT PROJECT

Do NOT want to read? Think you got it? Try this short-hand guide

It's Expected That:

  • You have created a folder for your project
  • Have a terminal command prompt opened and targeting your project folder
  • Know the basics of npm init and package.json

In a command terminal, in the folder of your new project, run the following 4 commands:

Command 1: Answer the npm init questions to create a package.json file

$ npm init

Command 2: Install ack-webpack so it can start helping boot your project structure

$ npm install ack-webpack --save-dev

Command 3: Run the most basic ack-webpack command to answer questions about your project

$ npm run ack-webpack -- init

Command 4: (optional) Build your project structure depending on what tools you need

The previous step commands are ones almost everyone will use. The following are only to be used if they apply to your project

  • $ npm run ack-webpack -- init:fontawesome
    • Asks questions to initialize a great icon with font/css files output into your assets folder
  • $ npm run ack-webpack -- init:angular
    • Asks question to installl dependencies commonly needed in an Angular project
  • $ npm run ack-webpack -- init:ack-app
    • Asks question to initialize an Angular with the same structure as Acker Apple uses

The rest of the documentation, expands and explains the above short-hand guide

Installation

Install ack-webpack into your project

Pre-Install Check

  • Ensure you have a package.json file in the project folder you will be install ack-webpack into
    • Inside your project folder, you can run npm init in a command prompt terminal, to create a package.json file

Primary Install Command

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

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

Commands

Compile Commands

Get your code where and how you want it with ack-webpack compiling commands

Compile 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
  • modules
    • comma delimited list of node_modules like folders
    • commonly used as --modules js_modules
    • equivalent to webpack.config.js.resolve.modules = ["node_modules"]
    • Using js_modules to satisfy typescript troubles?
      • Add the following to your tsconfig.json file "compilerOptions"
        • "compilerOptions":{"paths":{"*":["node_modules/*","js_modules/*"]}}

Compile Command Examples

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

Install Commands

To make life easier, ack-webpack params and utilizes a "jsDependencies" key of package.json files

Install Command Options

  • out
    • default is npm node_modules folder
    • Commonly set to js_modules when overcoming restrictions/limitations or other like issues with targeting node_modules folder
  • lock
    • writes all sub-package jsDependencies into your package.json file jsDependencies as if they were direct dependencies of current project
  • depkey = jsDependencies
  • no-save
    • Prevent ack-webpack from auto adding installs as jsDependencies

install:js

EXPERIMENTAL . This was created during Angular2 AoT compiling issues but those problems have been solved. I, Acker Apple, no longer use this technique.

Create, read, and write js_modules jsDependencies a lot like node_modules devDependencies

The following will read jsDependencies in package.json and install them into a folder js_modules

npm run ack-webpack -- install:js

Project Init Commands

Depending on what project you are starting, the following project commands can save you time

init:angular

A series of questions will help lead to a faster Angular project bootup

npm run ack-webpack -- init:angular

init:angular:test

A series of questions will help lead to a faster setup of an Angular test enviroment

under contruction. Currently, assumes too much like that files are in /src folder

npm run ack-webpack -- init:angular:test

init:font-awesome

A series of questions will help lead to a faster font-awesome integration into your project

npm run ack-webpack -- init:font-awesome

init:ack-angular

A series of questions will help lead to a faster ack-angular integration into your project

npm run ack-webpack -- init:ack-angular

init:ack-app

A series of questions will help lead to a faster application setup the Acker way

npm run ack-webpack -- init:ack-app

init:ts-dist

A series of questions will help lead to a faster TypeScript distribution package

npm run ack-webpack -- init:ts-dist

Install your own jsDependencies

Similar to npm install but reads/writes jsDependencies instead of devDependencies or dependencies.

Example: Install ack-angular-fx

npm run ack-webpack -- install ack-angular-fx

The above, will auto param jsDependencies in your package.json file and add ack-angular-fx to it

Compound Installs

npm run ack-webpack -- install ack-x ack-angular-fx@^1.03 ack-p

Lock subsequent jsDependencies by having them written into your main package.json.jsDependencies

npm run ack-webpack -- install ack-angular-fx --lock

Change Install Path

Experimental. This was created during Angular2 AoT compiling issues but those problems have been solved. I, Acker Apple, no longer use this technique.

npm run ack-webpack -- install --out js_modules

Install All jsDependencies

Almost like npm install but for jsDependencies

npm run ack-webpack -- install

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/",
    "install:jsDependencies": "ack-webpack install",
    "install:js": "ack-webpack install:js"
  }
}

Now you can run any of the following in a command prompt terminal

npm run build
npm run watch

table of contents