Foreword: I generally do these things as Gists, but I figured this one is such a common question it would be worthwhile posting here.
Let's talk about Webpack for a sec. It's great and I think there comes a point in many projects where you step slightly beyond what Browserify and its plugin ecosystem are able to do (ancient non-npm dependencies, etc). Often times the best solution is still Browserify, just with some tweaking - maybe you need to fork that module and refactor it a bit to properly export things.
What if there was a way to make Webpack behave as simply as Browserify, right out of the box? That's where I'm at. It's annoying to switch back and forth depending on the project, when I'm generally using these two tools to accomplish the same task.
Here's what I now use when starting a new Webpack-based app project (not for libraries, for just use Browserify):
Install Webpack & Friends
npm i -D webpack webpack-dev-server babel babel-loader less-loader css-loader style-loader autoprefixer-loader
Add NPM-Scripts
"scripts": {
"dev": "WEBPACK=webpack-dev-server npm run build -s",
"build": "${webpack:-webpack} src/index.js --output-path build --output-file bundle.js -d --module-bind 'js=babel' --module-bind 'less=style!css!autoprefer!less'"
}
... then run them via npm run dev and npm run build.
Full Webpack Setup
This is a basic Webpack project template for a web app written in ES6 & LESS.
This assumes you have a directory structure as follows:
package.json
webpack.config.js
src/
index.js
static/
index.html
Installation
1. Clone the repo and start your own:
git clone git@gist.github.com:3c83db422f03ef66ea36.git
rm -rf .git
git init
2. Install dependencies:
npm install
That's it.
Development Workflow
Start the live-reload dev server:
PORT=8080 npm run dev
Open up http://localhost:8080/webpack-dev-server/ to see your app. The app gets reloaded as files change.
Deployment Workflow
To deploy your static app, upload the contents of build/ to a web server.
Or, push this repo to heroku. http-server is used to serve the files in build/.
Or, and like the best option, deploy this to Firebase. Use this firebase.json.