I hope you enjoyed this clickbait title.
Edit: 2016-09-08
- add reference to Webpack: The Missing Tutorial ™ in the My problem with webpack
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:
- Using Angular 1.x With ES6 and Webpack
- Proper unit testing of Angular JS applications with ES6 modules
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:
- Create an
entry.jsfile and write some code - Create a basic HTML file with a
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>. - Run
webpack ./entry.js bundle.js - Open the page and voilà ! It works.
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:
require("!style!css!./style.css");
document.write(require("./content.js"));
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.
Conclusion
Repeat after me:
- Webpack is a tool.
- Webpack is a module bundler.
- Keep your tools and your app independant.
