Famous-Webpack-Seed

A seed project to get started with Webpack and Famo.us. Optional support for Cordova.

Features

• Your app is split into multiple bundles: ./src/xxxx/main.js > ./dist/xxxx/bundle.js
• Require .jade, .coffee and .less
• Support multiple configurations in your code: set window.ENV using the --env flag.
• Support for Cordova/Phonegap

---

Getting started with Famo.us and webpack

Installation

npm install -g webpack webpack-dev-server # install webpack 
git clone https://github.com/markmarijnissen/famous-webpack-seed # clone this repository 
# rm -rf .git # optionally remove git history 
npm install # install dependencies 

Development

webpack-dev-server --reload=localhost

Now navigate to:

• http://localhost:8080/boilerplate/index.html
• http://localhost:8080/webpack-dev-server (lists all bundles)

The optional --reload=ip flag adds the live-reload snippet to your bundle(s).

Production

webpack --minify --env=production

• The optional --minify flag minifies the output.
• The optional --env=xxx flag sets a global ENV variable (default: window.TARGET='dev').

---

Getting started with Cordova

Installation:

npm install -g cordova
webpack --cordova # automatically creates a Cordova config.xml 
# change app ID in config.xml (optional) 
cordova platform add ios # or android 

webpack-cordova-plugin is used to add Cordova to your project.

Development:

webpack-dev-server --cordova --reload=192.168.0.1 --ios # or --android 
 
# in seperate terminal-tab, launch cordova 
cordova run ios # or android 

• The --reload flag enables live reloading, and points Cordova to your webpack-dev-server.

• The --ios or --android flags ensure the correct Cordova and plugin javascript is loaded. The javascript is different for each platform and located at platform/ios/www or platform/android/assets/www.

Production:

webpack --cordova --minify
cordova run ios # or android 

Cordova troubleshooting

For more information and troubleshooting see the webpack-cordova-plugin.

---

Advanced uses

Single entry-point

Don't like multiple entry points? Just modify the config.entry to point to your single entry point.

That was easy!

Extend this config

1. Install famous-webpack-seed as npm module.

npm install famous-webpack-seed --save-dev

1. Copy these devDependencies to your package.json and run npm install

{
  "coffee-loader": "^0.7.2",
  "coffee-script": "^1.7.1",
  "css-loader": "^0.7.0",
  "expose-loader": "^0.5.3",
  "file-loader": "git://github.com/talves/file-loader.git",
  "glob": "^4.0.5",
  "html-loader": "^0.2.2",
  "jade": "1.2.0",
  "jade-loader": "^0.6.1",
  "json-loader": "^0.5.1",
  "less": "^1.7.4",
  "less-loader": "^0.7.5",
  "optimist": "^0.6.1",
  "script-loader": "^0.6.0",
  "style-loader": "^0.6.4",
  "url-loader": "^0.5.5",
  "webpack": "^1.4.10",
  "webpack-cordova-plugin": "^0.1.3",
  "webpack-dev-server": "^1.6.5",
  "webpack-reload-plugin": "^0.1.1"
}

1. A sample webpack.config.js to get started:

   var config = require('famous-webpack-seed');
   config.context     = __dirname + "/src";
   config.output.path = __dirname + "/dist";
   // modify any other properties of config here...
   module.exports = config;

Contributors

Like it? Show some love and star this project!

• Based on the original seed from Adrian Rossouw
• Bugfix from Tony Alves