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 globalENV
variable (default:window.TARGET='dev'
).
Getting started with Cordova
Installation:
npm install -g cordovawebpack --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 atplatform/ios/www
orplatform/android/assets/www
.
Production:
webpack --cordova --minifycordova 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
- Install
famous-webpack-seed
as npm module.
npm install famous-webpack-seed --save-dev
- Copy these
devDependencies
to yourpackage.json
and runnpm install
- A sample
webpack.config.js
to get started:var config = ;configcontext = __dirname + "/src";configoutputpath = __dirname + "/dist";// modify any other properties of config here...moduleexports = config;
Contributors
Like it? Show some love and star this project!
- Based on the original seed from Adrian Rossouw
- Bugfix from Tony Alves