Over the past few weeks I've been migrating our asset pipeline at Spatie from Laravel Elixir (a gulp wrapper) to webpack. Between having endless possibilities, the occasional incomplete section in the docs, and the fact that everyone has slightly different needs for their asset pipeline (which makes examples hard), it has surely been an adventure. I'm going to do a quick summary of my goals, and how I achieved them with webpack. Hopefully there will be some useful snippets in here for when you're setting up your own webpack configuration.

I'm not going to explain any basic concepts. If you're new to webpack, I'd recommend you to go through Webpack Your Bags on madewithlove's blog first. On the other hand, if you just want a tl;dr in the form of a webpack config file, our base configuration is hosted on Github.

Goals

Our previous setup was a gulpfile utilizing Laravel Elixir, which compiled our sass files and bundled our javascript files with Browserify. The reason for giving webpack a shot was mainly because we wanted a faster javascript bundler and a growing interest in hot module replacement.

This all boiled down to the following we-want-these-features list:

Bundle our js and transpile es6/jsx

Compile our sass files, and autoprefix the output

Asset revisioning for the css and js output

Minification and uglification in production

Wrap everything in a gulp task to maintain a consistent API with older projects

Hot, or at least live, reloading (I'll do a Laravel Homestead specific post on this later)

An extra webpack-specific caveat: by default css files are saved as js files, for now we wanted to stay with the traditional single(ish) css-file in the page's .