DEV Community

The Fine Art of the Webpack 2 Config

Alexander Flenniken on February 09, 2017

Like this article? Check out blog.flennik.com for more content like this! In the constantly mutating world of webdev, skepticism and con...

Read full post

Pavol Rajzak • Mar 13 '17

It's kind of funny, since past few days I have been mostly configuring Webpack 2 builds. The #1 most difficult part for me was to setup loaders to correctly process static assets. E.g. I had problems with style-loader and external fonts (where I've found a very specific race-condition-ish case where it just didn't work). Also, I think the documentation for some (even contrib) loaders should be more verbose, including examples for both inline and external config.

Juho Vepsäläinen • Feb 12 '17

Have you seen webpack-merge? I designed it to make it easier to configuration. The basic merge is enough in practice and it allows you to extract commonalities and even compose if you want.

I agree a single file is a great starting point. I prefer to maintain my own "blocks" for the reasons outlined above. In part it's about owning your configuration as you can't wait for third party fixes. That said, if you own your configuration, it can be sensible to package it up so that you can share it across projects (middle ground).

I wrote a little free book that digs deeper into the way I think about webpack. I hope you find something useful there.

Pavol Rajzak • Mar 13 '17

+1 for the webpack-merge, I've been using it ever since I found it. Much more clearer than isProduction inline hacks.

Chris Jasper • Feb 24 '17

Nice to see others getting the word out about Webpack 2 lesser known features. I am also looking forward to checking out Au7. I have my own library on top of F7 using ES6. I also have been using Aurelia for web projects for about a year now. I thought about bringing the two together but haven't needed to yet with what I have in my library.

Dan Menssen • Mar 15 '17

Nitpick:

Does it seem strange to anyone else that the function needs to be wrapped in () like (functionGoesHere) for the self-executing to work?

In your example, it doesn't, because the context is already an expression.

This works fine:

const x = { y: function() { return 'z' }() }
console.log(x.y) // z

But this doesn't and the parens are required:

function() {
  console.log('a')
}()

Using them in your example is a convention. See also eslint.org/docs/rules/wrap-iife

jonjump • May 15 '17

Alex - you are the only person to have done a good job of explaining the new webpack 2 environment variables. Saved me hours. A model of clarity. Thanks.