famous-webpack-seed v0.9.2
#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 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 atplatform/ios/www
orplatform/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
Install
famous-webpack-seed
as npm module.npm install famous-webpack-seed --save-dev
Copy these
devDependencies
to yourpackage.json
and runnpm 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" }
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