We've got modular ES6 with Babel and Webpack!
I've included a couple boilerplate files. __tests__ contains a dummy test file to remind you to test your code! I've also included a module/feature initialization pattern I've found helpful on projects. In the demo, I've included additional examples of generating mulitple files, async module loading and splitting out shared dependences to show the power of Webpack.
In development, JavaScript is compiled with webpack-dev-middleware and webpack-hot-middleware by passing these into BrowserSync as middleware. You don't have to take advantage of webpack hot module replacement, but it's there if you want it! I use it on all my React.js projects with things like react-transform-hmr. But before you go and do that, read Dan Abramov's disclaimer, which is also a great tutorial on using vanilla Webpack HMR.
gulpfile.js/tasks/browserSync
gulpfile.js/tasks/webpackProduction
gulpfile.js/lib/webpack-multi-config
There are a couple of webpack options exposed in the top-level gulpfile.js/config.json file.
Discrete js bundle entry points. A js file will be bundled for each item. Paths are relative to the javascripts folder. This maps directly to webpackConfig.entry.
Creates a shared.js file that contains any modules shared by multiple bundles (don't forget to include that on the page!). Useful on large sites with discrete js running on different pages that may share common modules or libraries. For smaller sites, you'll probably want to skip the async stuff, and just compile a single bundle by setting extractSharedJs to false
If you want to mess with the specifics of the webpack config, check out gulpfile.js/lib/webpack-multi-config.js.