I'm Siegfried. A developer. Yep.

Webpack considered harmful

I hope you enjoyed this clickbait title.

Edit: 2016-09-08

What is webpack

webpack is a module bundler. Bundling files is its goal.

In most cases you will be able to replace your build toolchain (with legacy things like grunt or gulp) with webpack, but keep in mind that their goals are different.

My story with webpack

As far as I remember, I think that when I first checked the webpack website there was almost nothing that can be considered documentation. It is a well known problem for the webpack team, and they have already improved it a lot.

I tried to play with it three times, and I lost twice ^^.

Trying to understand existing code to adapt it on a existing project is not easy.

I was working on an Angular 1.5 project written in ES5, that had been generated using some Yeoman generator. We had a shitload of tooling files for gulp and we barely used all that we had.

It was a good time to start something fresh !

We wanted to move to ES6 and webpack.

I used these resources a lot at first:

Then, I rewrote the whole thing from scratch. You will not find my config because you should learn how to configure the damn thing.

I now have some nice configurations for bundling and testing and I am very happy with the result, but…

My problem with webpack

Let’s get back to the tutorial.

As of today, here is what you should do:

The tutorial goes on with requiring another file from the first one, and (that is where I am starting to feel weird): add a css loader by updating the entry.js file to:


Wow !

So now, my entry point entry.js that should be my application contains some weird require code and a require to a css file.

In short: I have to code my entry point in webpack.

This is not good.

Tools are what they are: tools. They will evolve and be replaced some day, and they should not guide or interfere with the way your are organizing your files or code.

Webpack: The Missing Tutorial ™ also code the profile.js in webpack by including the css in the profile.js file.

The solution

It is very simple: do not consider entry.js as your main application file. It is a webpack file that lives next to webpack.config.js

entry.js have to require your app.js or main.js (which is the real entry point for your application) and all the not JS things that will be handled by webpack.


Repeat after me: