kommander / backbone-webpack-example

Example of converting a Backbone app to use Webpack

Backbone.js & Webpack TodoMVC Example

This example uses Webpack to bundle all JavaScript and CSS dependencies in the app!

Loaders

For JavaScript:

• babel - Turns ES6+ code into ES5-friendly code, supports React, JSX, and Flow as well
• react-hot - Enables live-editing of React components, preserving their state
• eslint - Add lint rules to enforce best practices, supports ES6, React, and JSX as well
• jshint - Similar to above
• markdown - Loads markdown from a file that can then be easily rendered as HTML
• handlebars, mustache, ejs, etc - Various flavors of templating

For CSS:

• postcss - Transform CSS with autoprefixing, minification, RTL, etc.
• sass - Extends CSS with more traditional programming mechanisms (mixins, functions, etc.)
• less - Similar to above
• autoprefixer - Adds vendor prefixes to CSS

Plug-ins

• HotModuleReplacementPlugin - Replaces JavaScript/CSS modules without reloading the browser
• I18n - Create locale-specific bundles with translations baked in
• Rewire - Modify behavior of modules for easier unit testing in node.js
• UglifyJs - Minifies JavaScript output in bundles (use in a production config)